CSS box-shadow generator

Tune box-shadow visually and copy the CSS.

Horizontal (X) 0px Vertical (Y) 8px Blur 24px Spread 0px

Shadow color Opacity 25% Inset

Shadows are hard to write blind. box-shadow: 0 8px 24px rgba(0,0,0,.25) is four values and a colour, and the only way to know whether it looks right is to save the file and look — then change one number and look again.

This generator puts each of those values on a slider with a live preview, so you adjust the shadow by eye and copy the rule once it looks the way you want.

How it works

The five values in a box-shadow

Every control on the page maps to one part of the CSS.

Control	CSS position	What it does
Horizontal (X)	1st value	Pushes the shadow right, or left with a negative value
Vertical (Y)	2nd value	Pushes the shadow down, or up with a negative value
Blur	3rd value	Softens the edge. `0` gives a hard-edged copy of the shape
Spread	4th value	Grows or shrinks the shadow before it is blurred
Shadow colour + Opacity	colour	Written as `rgba()`, with opacity as the alpha channel

Settings that read as realistic

Shadows look convincing when they behave like light from above: leave Horizontal at or near 0, give Vertical a small positive value, and use a Blur two to three times that offset. Opacity does most of the work — a heavy shadow is usually one that is too opaque rather than too large, and values under about 30% suit interface elements. For cards and dropdowns, a dark grey or a desaturated version of your background colour often looks better than pure black.

Spread is the value people reach for least. Negative spread pulls the shadow in behind the element, which is useful for a tight shadow that does not leak out at the sides.

Inset, and stacking shadows

Tick Inset and the shadow is drawn inside the element instead of behind it — the look used for pressed buttons, input fields and inner wells.

The generator writes one shadow, but the property accepts a comma-separated list, and layering is how depth is usually built in practice: a small, tight shadow for the contact edge plus a larger, fainter one for the ambient spread. Generate each separately and join them, for example box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.12);. Earlier shadows in the list are drawn on top.

Terms explained

Offset: The horizontal and vertical distance the shadow is moved from the element. Positive values move it right and down; negative values move it left and up.
Blur radius: How far the shadow edge is feathered. At 0 the shadow is a sharp silhouette; larger values spread the same amount of darkness over more pixels, so it also looks fainter.
Spread radius: How much the shadow is grown or shrunk before blurring. Positive makes it larger than the element, negative makes it smaller.
Inset: Draws the shadow inside the element's border box rather than outside it, giving a recessed appearance.
Alpha: The transparency channel in `rgba()`, set here by the Opacity slider. 0 is fully transparent and 1 is fully opaque.
rgba(): A colour written as red, green and blue values plus an alpha value — the form the generator uses so the shadow blends with whatever sits behind it.

Frequently asked questions

I copied the CSS but no shadow appears. Why?

The usual causes are an offset, blur and spread all set to zero, which hides the shadow exactly behind the element, or `overflow: hidden` on a parent clipping it. It is also worth checking that the element is not `display: inline`, since shadows follow the element's box and an inline box may not have the shape you expect.

What is the difference between blur and spread?

Spread changes the size of the shadow shape; blur softens its edge. Increasing spread gives you a bigger shadow that is just as dark, while increasing blur keeps the size but makes the edge diffuse and the whole thing lighter.

How do I get the soft, layered shadows used in modern interfaces?

Stack two or three shadows in one declaration rather than pushing a single one further. A short, slightly opaque shadow anchors the element to the surface and a wide, very faint one suggests ambient light, which is far more convincing than one large blur.

Why does the shadow ignore my rounded corners on an image?

`box-shadow` follows the border box and its `border-radius`, so the radius must be on the same element that carries the shadow. If the radius is applied to a wrapper and the shadow to the image inside, or the other way round, the two will not line up.

Does box-shadow follow a clip-path or a transparent PNG?

No. It is drawn from the element's rectangle, so a shape cut with `clip-path` or a PNG with transparency still casts a rectangular shadow. For a shadow that traces the visible outline, use `filter: drop-shadow()` instead.