EN

CSS box shadow generator

Pick a preset or set the offset, blur, spread, color and opacity with the sliders. Stack several shadows and turn any of them into an inner shadow (inset). The preview updates instantly and the finished CSS is one click away. You can also paste your own CSS below and keep editing it.

Adjust the shadow

Presets

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
One shadow per line, separated by commas – e.g. 0 4px 12px rgba(0, 0, 0, 0.12)
Your inputs are saved in this browser only.

Result

CSS declaration
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Shadow layers (the first one is on top)
No.Offset X (px)Offset Y (px)Blur (px)Spread (px)ColorType
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)outer
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)outer
How far the shadow extends beyond the box (approx.)
top 10 px · right 20 px · bottom 30 px · left 20 px

How it is calculated

How box-shadow works

According to the W3C specification (CSS Backgrounds and Borders Level 3), a shadow consists of two to four lengths, an optional color and the optional keyword inset:

ValueMeaning
1st lengthHorizontal offset to the right (negative: to the left)
2nd lengthVertical offset downward (negative: upward)
3rd lengthBlur radius, never negative; 0 if omitted
4th lengthSpread: grows the shadow, a negative value shrinks it
Colorif omitted, the text color is used (currentColor)
insetdraws the shadow inside the box instead of outside

Separate multiple shadows with commas. The first shadow is painted on top, the others behind it. Shadows do not affect layout or create scrollbars – but a parent with overflow: hidden will clip them.

How far does the blur reach?

The spec requires a blur that approximates a Gaussian blur with a standard deviation of half the blur radius. The resulting transition is about twice as wide as the blur value and centered on the shadow edge – so it reaches roughly one blur radius outward.

Example 0 10px 25px -5px: the edge sits 25 − 5 = 20 px outside the box, shifted 10 px down. The shadow therefore extends about 20 − 10 = 10 px at the top, 20 px on each side and 20 + 10 = 30 px at the bottom. The generator shows these values under “How far the shadow extends” – handy as padding so nothing gets clipped.

Common uses

Frequently asked questions

What is the difference between blur and spread?

Blur (3rd value) softens the edge without changing the base area of the shadow. Spread (4th value) grows or shrinks the shadow area itself before it is blurred. A blur of 0 with a positive spread gives a hard outline.

How do I stack multiple shadows?

Separate them with commas, e.g. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). The first shadow is drawn on top. In the generator, add more layers with “+ Shadow”.

Why is my shadow cut off?

Shadows do not count toward an element’s size. If a parent has overflow: hidden or overflow: auto, anything sticking out is clipped. Give the parent as much padding as the generator shows under the shadow’s extent.

Does box-shadow work in every browser?

Yes. box-shadow, including multiple shadows, inset and rgba() colors, is supported unprefixed by all current browsers. The generator writes transparent colors as rgba(), which older browsers understand as well.

Sources and legal basis

As of:

Related tools