CSS Box Shadow Generator
Design soft, layered or inset shadows and copy the CSS.
How to use CSS Box Shadow Generator
- Move the sliders for offset, blur, spread and opacity, and watch the preview.
- Add a second layer for a more natural shadow, or tick Inset for a pressed-in look.
- Select Copy CSS.
How it works
The box-shadow property takes, in order: horizontal offset, vertical offset, blur radius, spread radius and colour, with the optional keyword inset. A positive vertical offset moves the shadow down, as if light came from above. Blur softens the edge; spread grows or (when negative) shrinks the shadow before it is blurred, and a negative spread with a large blur gives the soft "floating card" look.
Real shadows have a tight dark part near the object and a wide soft part further out, which is why interfaces often stack two layers: a small, sharper shadow plus a large, faint one. The second layer here does that. Opacity is written into the colour as rgba(), which is what keeps shadows subtle on any background.
Shadows are cheap to draw when static. Animating box-shadow forces repainting on every frame; to animate, fade the opacity of a pseudo-element that carries the shadow instead.
Example
box-shadow: 0px 10px 30px -6px rgba(0, 0, 0, 0.22), 0px 2px 6px 0px rgba(0, 0, 0, 0.12); is a soft, natural card shadow.
Frequently asked questions
What is the difference between blur and spread?
Blur makes the shadow’s edge softer. Spread changes the shadow’s size: positive values make it larger than the box, negative values smaller.
How do I make a shadow on one side only?
Use an offset in that direction with a negative spread about as large as the blur is wide, so the shadow does not show on the other sides.
What does inset do?
It draws the shadow inside the element’s border, which makes it look recessed, useful for input fields and pressed buttons.
Does box-shadow follow rounded corners?
Yes, it follows border-radius. For shadows that follow the shape of a transparent PNG or text, use filter: drop-shadow() or text-shadow instead.
Limitations
- Up to two layers; the second shares the first layer’s colour and horizontal offset of 0.
- box-shadow only: no text-shadow or drop-shadow filter output.
Last reviewed November 9, 2026. How we build and test tools.