About the Box Shadow Generator
This box shadow generator exposes every argument of the CSS box-shadow property as its own slider, so you can see what spread actually does rather than reading about it. Set the horizontal and vertical offsets between -60 and 60 pixels, blur up to 120, spread from -40 to 60, then pick a shadow colour and an opacity percentage that the tool converts into an rgba() value for you. A checkbox flips the shadow to inset. The preview box carries your chosen surface colour and corner radius so the shadow is judged in context, and the CSS panel stays in step.
How to use the Box Shadow Generator
- 1
Set Horizontal offset and Vertical offset to decide where the shadow falls relative to the box.
- 2
Raise Blur for a softer edge and adjust Spread — negative values pull the shadow in, positive values push it out.
- 3
Choose the Shadow colour and Shadow opacity; the tool combines them into an rgba() value.
- 4
Set Box colour and Corner radius so the preview matches your real component, then tick Inset shadow if you want a recess.
- 5
Copy the generated box-shadow declaration from the CSS panel.
What people use it for
Elevation for cards and menus
A large blur with a negative spread and low opacity gives the diffuse lift that modern card designs use, rather than the hard dark band a naive shadow produces.
Focus rings that meet contrast rules
Zero offset, zero blur and a positive spread makes box-shadow behave as an outline that follows the border radius, which a plain outline property historically did not.
Inset shadows for inputs and wells
Ticking Inset with a small vertical offset makes a text field or a progress track look recessed, signalling that it accepts content rather than being clickable.
Coloured shadows under buttons
Taking the shadow colour from the button's own background at low opacity produces a glow that reads as light bouncing off the surface below.
The box-shadow syntax argument by argument
A single shadow takes up to six parts in a fixed order: the optional inset keyword, then horizontal offset, vertical offset, blur radius, spread radius, and a colour. Only the two offsets are required. The horizontal offset moves the shadow right when positive and left when negative; the vertical offset moves it down when positive and up when negative. Blur radius controls the width of the transition from opaque to transparent and must not be negative; the visible softness extends roughly half the blur value on each side of the shadow's edge, which is why a 40-pixel blur reads as about 20 pixels of feather. Spread grows or shrinks the shadow's shape before the blur is applied, so a negative spread shrinks the silhouette and lets only a soft halo escape from behind the element — the technique behind almost every subtle elevation style in current design systems. The colour comes last and defaults to the element's currentColor when omitted, which is rarely what anyone intends.
Inset against outset, and stacking multiple shadows
Without the inset keyword the shadow is painted outside the border box, as if the element were floating above the page. With inset it is painted inside the padding box instead, clipped to the element's own shape, which reads as a hollow pressed into the surface. The two are not opposites in geometry so much as in clipping: an outer shadow is clipped so nothing shows through the element itself, while an inset shadow is clipped so nothing escapes beyond it. You can list several shadows in one declaration, separated by commas, and mix inset and outer freely. Paint order runs first to last, so the first shadow in the list sits on top. The standard recipe for realistic depth uses two or three layers: a tight, slightly darker shadow with a small offset for the contact edge, then a wider, much softer and fainter one for ambient light. This mirrors how real shadows behave, where the penumbra widens with distance from the surface.
Tips
- Keep shadow opacity low — 10 to 25 percent on a dark neutral almost always beats a heavy black at full strength.
- Tint the shadow towards the background hue rather than using pure black, which looks dirty over coloured surfaces.
- Reach for filter: drop-shadow instead when the element is a transparent PNG or a clipped shape, since box-shadow only follows the rectangle.