CSS Box Shadow Generator
Build CSS box-shadow visually: stack multiple layers, set offsets, blur, spread, inset and RGBA opacity, preview live and copy clean code.
Presets
Layers
Preview settings
Preview
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Related Tools
View AllWhat is CSS Box Shadow Generator?
A visual editor for the CSS box-shadow property. You can stack several shadow layers, give each one its own offset, blur, spread, colour, opacity and inset flag, and see the result on a sample box while the tool writes the matching CSS.
How to use CSS Box Shadow Generator
- Pick a preset (Soft, Layered, Hard, Glow, Inner, Ring) or start from the default shadow.
- Select a layer and adjust Horizontal offset, Vertical offset, Blur, Spread, Shadow color and Opacity; tick Inset for an inner shadow.
- Use Add layer / Remove layer to build multi-layer shadows; layers are listed in paint order.
- Change the background, element color and radius under Preview settings to judge the shadow in context.
- Copy the generated CSS code.
Example
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
When to use CSS Box Shadow Generator
Use it to design card elevation, focus rings, glows or inner shadows for any HTML element. For shadows on text use the Text Shadow Generator, and for shadows that follow the shape of a transparent PNG or a clipped element use filter: drop-shadow() (CSS Filter Generator) instead, because box-shadow always follows the element's border box.
How CSS Box Shadow Generator works
Each layer becomes one box-shadow value in the order [inset] x y blur spread color. Lengths are written in px (zero as a unitless 0). The opacity slider is multiplied with the colour's own alpha: fully opaque colours are written as hex, translucent ones as rgba(r, g, b, a). Several layers are joined with commas, one per line; the first layer is painted on top. Blur cannot be negative, spread can.
Common Use Cases
- Material-style layered elevation for cards and modals
- Accessible focus rings with a spread-only shadow (0 0 0 3px)
- Inner shadows for pressed buttons and input fields
- Coloured glows around call-to-action buttons
- Hard offset shadows for neo-brutalist designs
FAQs
In which order are multiple shadows drawn?
The first shadow in the list is painted on top and the last one at the bottom. The tool writes layers in the order shown in the Layers panel.
What is the difference between blur and spread?
Blur softens the edge of the shadow (it cannot be negative). Spread grows or shrinks the shadow before blurring; a negative spread makes the shadow smaller than the element.
Do I still need -webkit-box-shadow?
No. Unprefixed box-shadow has been supported by all browsers for more than a decade, so the tool outputs only the standard property.
Why does the shadow not appear around my transparent image?
box-shadow follows the element's rectangular box (including border-radius), not the visible pixels. Use filter: drop-shadow() for that.