CSS Box Shadow Generator
Build multi-layer CSS box shadows with a live preview.
Runs entirely in your browser.
Your data never leaves this device and is never sent to our servers.
CSS
A single box-shadow looks flat. Real shadows are several layers at increasing blur and decreasing opacity, which is why design systems ship shadow scales rather than one value.
Stack layers here, see the result immediately, and copy the CSS.
How to use it
- Adjust offset, blur, spread and colour.
- Add more layers for depth.
- Copy the generated CSS.
Not working as you expect? Report a problem with this tool.
Frequently asked questions
Why use multiple layers?
Light does not produce one uniform shadow. Two or three layers — a tight dark one and a wide soft one — read as far more realistic than a single large blur.
What is spread?
It grows or shrinks the shadow before blurring. A negative spread pulls the shadow in, which is useful for a subtle lift.
box-shadow or filter: drop-shadow?
box-shadow follows the border box. drop-shadow follows the alpha channel, so it is the one you want for a shadow on a transparent PNG or an irregular SVG.