About the CSS Box Shadow Generator
This tool builds a CSS box-shadow with a live preview and writes the code. Each layer has an X and Y offset, blur radius, spread radius, color, opacity and an inset switch, and you can stack up to eight layers. Layered shadows, one tight and dark plus one wide and soft, look more like real light than a single shadow, which is how most design systems define their elevation levels.
The preview lets you change the page background, the box color and the corner radius, so you can see how the shadow reads on your actual surface. Presets cover the common cases: subtle borders, cards, raised and floating panels, a glow, an inset well and a hard offset shadow. You can also paste an existing box-shadow value to edit it.
How to use it
- Start from a preset or adjust Layer 1.
- Add layers for softer, more natural depth.
- Match the background and box colors to your design.
- Copy the CSS.
Examples
- A card shadow: two subtle layers, good for cards and dropdowns.
- A floating panel: a large, soft shadow for modals.
- An inset field: a pressed-in look for inputs.
Common questions
What does spread do?
Spread grows the shadow (positive) or shrinks it (negative) before the blur. A negative spread with a larger Y offset keeps the shadow under the box instead of around it.
Do shadows slow pages down?
Rarely. Large blurs on many elements, or animating box-shadow itself, can cost repaints; animate the opacity of a pseudo-element instead.
Does box-shadow follow border-radius?
Yes, the shadow takes the element's rounded corners. For shapes from transparent images, use filter: drop-shadow() instead.
Related tools
- CSS Gradient Generator: build the background behind the box.
- Color Contrast Checker: keep text on the card readable.