Color & Design

Box Shadow Generator

Dial in a CSS box shadow with live sliders for offset, blur, spread, colour and opacity, then copy the code.

Color & design

Box shadow builder

Local only

Horizontal offset0pxVertical offset10pxBlur24pxSpread-6pxOpacity18%

Shadow color Inset shadow

Preview

box-shadow: 0px 10px 24px -6px rgba(15, 23, 42, 0.18);

Pure CSS, no uploads

The preview is a real element styled by your browser, so what you see is exactly what you will ship.

The five box-shadow values

In order: horizontal offset, vertical offset, blur radius, spread radius and colour. A positive vertical offset pushes the shadow down, blur softens the edge and a negative spread pulls the shadow in so it peeks out less.

Shadows that look natural

Keep the horizontal offset at 0 unless your design has a clear side light source.
Use low opacity with generous blur rather than a dark, tight shadow.
Layer two shadows — one tight, one wide — for realistic depth.

Good to know

Frequently asked questions

What does inset do?

It draws the shadow inside the element instead of outside, which is useful for pressed buttons and inset fields.

Can I stack multiple shadows?

Yes — copy two values from this tool and separate them with a comma in one box-shadow declaration.

Why use rgba instead of a HEX colour?

rgba lets you set opacity directly, which is what makes a shadow blend with whatever is behind it.

Do shadows affect layout?

No. Box shadows are painted outside the box model and never push other elements around.

Box shadow builder

The five box-shadow values

Shadows that look natural

Frequently asked questions

Related tools

Color Converter

Color Picker

HEX to RGB Converter