CSS Box-Shadow Generator

What is CSS Box-Shadow Generator?

CSS Box-Shadow Generator is a free visual editor for the CSS box-shadow property, built for front-end developers and designers. Add one or more shadow layers and tune each layer's offset-x, offset-y, blur radius, spread radius, color and inset flag with simple number inputs and a color picker. A live preview box on a checkerboard backdrop shows the combined result in real time, and the complete box-shadow declaration — comma-separating every layer — is generated for you to copy. Use it to craft soft elevation shadows, sharp neumorphism, glow effects, or layered Material-style depth without memorizing the value order.

How to use CSS Box-Shadow Generator

1. Set the first layer's offset-x and offset-y (in px) to move the shadow horizontally and vertically; negative values move it left or up.
2. Adjust the blur radius (how soft the shadow is) and the spread radius (how far it grows or shrinks).
3. Pick a color with the swatch or type a hex value — an 8-digit hex like #00000040 sets the shadow's transparency.
4. Tick the inset checkbox to draw the shadow inside the element instead of outside.
5. Click Add layer to stack another shadow on top, then reorder by editing values; remove any layer with its trash button.
6. Watch the preview update, then copy the generated box-shadow CSS into your stylesheet.

Examples

x 0, y 4, blur 12, spread 0, color #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Layer 1: 0 1 2 0 #0000001a · Layer 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset checked, x 0, y 2, blur 6, spread 0, color #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Frequently asked questions

What is the order of the box-shadow values?

Each layer is written as offset-x, offset-y, blur-radius, spread-radius, color, with an optional inset keyword in front. This tool always outputs all four lengths in px (offset-x, offset-y, blur, spread) so the order is unambiguous and easy to tweak by hand afterward.

Can I add a semi-transparent or colored shadow?

Yes. Type any CSS color into the color field — a full 8-digit hex such as #00000040 (the last two digits are the alpha) gives a semi-transparent shadow, and you can use named colors or any hex. The color picker swatch handles solid #rrggbb colors; for alpha, edit the text field.

How do I stack multiple shadows?

Click Add layer for each extra shadow. The generated CSS comma-separates every layer in order, top to bottom — the first layer is painted last (on top). Use this for layered Material-style depth or to combine an outer glow with an inset highlight.

What does the inset checkbox do?

Inset draws the shadow inside the element's border, creating a pressed-in or inner-glow look instead of an outer drop shadow. Tick it per layer; you can mix inset and outer shadows in the same box-shadow value.

Is my data uploaded anywhere?

No. The generator runs entirely in your browser with JavaScript — your colors and values are never sent to a server, so it works privately and even offline once the page has loaded.