Free CSS Box Shadow Generator

In order: inset (optional), X offset, Y offset, blur radius, spread radius and color. Positive X moves the shadow right and positive Y moves it down. A blur of 0 gives a hard edge. This tool always writes all four lengths in px, then the color.

Use a small Y offset, a large blur and low opacity, with spread near 0. A good start here is Y 6 px, blur 24 px and opacity 12%, which gives 0px 6px 24px 0px #0000001f. Add a second, tighter layer for more depth.

Blur softens the shadow's edge, and a higher blur fades it over a wider area. Spread grows or shrinks the shadow before the blur: positive spread makes it bigger than the box, negative makes it smaller. Here blur goes from 0 to 100 px and spread from -50 to 50 px.

Click Add shadow layer. Each layer gets a tab and its own settings, and the code joins them with commas, one per line. In CSS the first shadow in the list is drawn on top, so Layer 1 sits above the others.

Select the layer and tick Inset shadow. The code adds the inset keyword and the shadow is drawn inside the box instead of outside. With inset, a positive spread makes the inner shadow thicker. You can mix inner and outer layers in one rule.

Use two layers with opposite offsets: one dark, such as #000000 at 15% with X and Y at 8 px, and one white at -8 px with full opacity. Give the element and its parent the same soft background. The preview card here stays white, so check the result on your page.

box-shadow follows the element's box and its rounded corners, and supports spread and inset. The filter drop-shadow() follows the visible shape, such as a transparent PNG or an SVG icon, but has no spread or inset. This tool writes box-shadow only.

No. A shadow takes up no space, so it doesn't push other elements or change the box size. A parent with overflow: hidden can clip it, so leave some padding around the element when the blur or offset is large.

The tool adds the opacity to the color as two hex digits, so it only works with 6-digit hex codes like #1e293b. Short codes such as #fff, color names and rgba() turn into invalid CSS and the shadow vanishes. A typed blur below 0 or opacity over 100 does the same.

Not directly, since the output is plain CSS. In Tailwind, put the values in an arbitrary shadow class and swap each space for an underscore, as in shadow-[0px_4px_12px_0px_#00000026], or add the full value as a custom shadow in your theme.

Yes. It's free, with no account and no cap on shadows or layers. Your values stay in this tab and aren't saved, so a reload brings back the default shadow. On the live site, Google Analytics counts Copy CSS clicks, never the shadow values.