How do I add multiple box-shadows?

CSS lets you comma-separate several shadows on one element. Add a layer for each shadow here and they're combined into a single box-shadow value in the order you stack them.

What does the spread value do?

Spread grows (positive) or shrinks (negative) the shadow before the blur is applied, so a positive spread makes the shadow larger than the element and a negative spread pulls it in — useful for tight, offset shadows.

Is anything uploaded?

No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free.

Surface colour

Picker

Presets

Smooth layered shadow builder

Layers 4

Distance 24px

Blur 40px

Opacity 0.12

Colour

Picker

X offset 0px

Y offset 10px

Blur 25px

Spread -5px

Colour

Picker

Opacity 0.25

Format

box-shadow: 0px 10px 25px -5px rgba(15, 23, 42, 0.25);

CSS box-shadow generator

Dial in the horizontal and vertical offset, blur, spread, colour and opacity, and stack several shadow layers for depth; name, reorder, hide and duplicate them. Toggle inset for inner shadows, start from Material elevations, neumorphism or neon, or let the smooth layered shadow builder make the layers. The preview and CSS update as you go.

It all runs client-side — nothing is uploaded — so you can design a shadow and copy the box-shadow value straight into your stylesheet.

Need another effect? See all CSS generators.

More CSS generators

CSS Gradient Generator

Linear, radial & conic gradients with unlimited stops.

CSS Border Radius Generator

Round each corner independently in px, % or em.

Glassmorphism CSS Generator

Frosted-glass blur, transparency & border.

CSS Text Shadow Generator

Offset, blur, color — glow & layered text effects.

CSS Cubic Bezier Generator

Drag the curve to design custom easing.

CSS Box Shadow Generator — frequently asked questions

How do I add multiple box-shadows?: CSS lets you comma-separate several shadows on one element. Add a layer for each shadow here and they're combined into a single box-shadow value in the order you stack them.
What does the spread value do?: Spread grows (positive) or shrinks (negative) the shadow before the blur is applied, so a positive spread makes the shadow larger than the element and a negative spread pulls it in — useful for tight, offset shadows.
Is anything uploaded?: No. The CSS is generated live in your browser with JavaScript — nothing is sent to a server, there's no sign-up, and it's free.

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.