Box Shadow Generator

Design layered CSS box shadows visually, including inset shadows, and copy the CSS.

Runs in your browser. Your input is processed on your device and is not uploaded to our server.

Horizontal offset (px)

Vertical offset (px)

Blur (px)

Spread (px)

Colour

Opacity (%)

Inset

Box colour

Background

CSS

How to use the Box Shadow Generator

Adjust offset, blur, spread, colour and opacity.
Add layers for softer, more realistic shadows.
Copy the box-shadow declaration.

Several low-opacity layers with increasing blur look more natural than a single dark shadow. Large blurred shadows can affect scrolling performance on low-end devices, so keep them modest on long lists.

Frequently asked questions

What is spread?

Spread grows (positive) or shrinks (negative) the shadow before blurring.