What is the difference between blur and spread?

Blur softens the shadow's edge: the larger the value, the more diffuse it is. Spread grows or shrinks the whole shadow before it is drawn. Typical card shadows pair a generous blur with a negative spread so the shadow stays under the element instead of leaking out around it.

When should I use an inset shadow?

Inset shadows are drawn inside the element and are how you suggest a recessed input, a pressed button, or an inset well. They can coexist with outer shadows in the same comma-separated box-shadow value.

CSS / FRONTEND · RUNS IN YOUR BROWSER

CSS Box Shadow Generator

Tune offset, blur, spread, and colour, stack multiple layers, and copy the CSS.

Up to 6 shadow layers. The preview backdrop switches between light, dark, and a transparency checkerboard.

Preview

Preview backdrop

LightDarkTransparent

Generated CSS

box-shadow: 0px 12px 32px -8px rgba(16, 24, 40, 0.28);

Presets

Shadow layers

Layer 1

Horizontal offset

Vertical offset

Blur

Spread

Shadow colour

Opacity

Inset shadow

About this tool

Convincing shadows are rarely a single layer. Stack up to six, each with its own horizontal and vertical offset, blur, spread, colour, and inset flag, and the preview composites them in the same order CSS does. The presets cover the usual range from a barely-there hairline to a lifted floating card, so you can start from something close and adjust.

How it works

Start from a preset, or build up from a single layer.
Set offset, blur, and spread with the sliders, then choose the shadow colour and opacity.
Add a second layer for more depth, then copy the box-shadow declaration.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

What is the difference between blur and spread?: Blur softens the shadow's edge: the larger the value, the more diffuse it is. Spread grows or shrinks the whole shadow before it is drawn. Typical card shadows pair a generous blur with a negative spread so the shadow stays under the element instead of leaking out around it.
When should I use an inset shadow?: Inset shadows are drawn inside the element and are how you suggest a recessed input, a pressed button, or an inset well. They can coexist with outer shadows in the same comma-separated box-shadow value.

← All CSS / Frontend tools