CSS Box Shadow Generator

Build CSS box shadows from up to five layers — offset, blur, spread, colour, opacity and inset — with a live preview and copyable CSS.

Preview

CSS
box-shadow: 0 4px 12px -2px rgb(15 23 42 / 0.12),
    0 2px 4px -1px rgb(15 23 42 / 0.08);
border-radius: 12px;

Shadow

px
px
px
px
%
Preview box
px
How is this calculated?
box-shadow: [inset] <x> <y> <blur> <spread> <colour>, …. Blur is never negative; the colour is written as rgb(r g b / alpha).

Runs in your browser — nothing you enter leaves this device.

About this tool

What it does

CSS Box Shadow Generator builds the box-shadow property layer by layer, with a live preview. Each layer has a horizontal and vertical offset, a blur radius, a spread (positive grows the shadow, negative shrinks it), a colour and an opacity, and can be inset to draw inside the box instead of behind it. Up to five layers can be stacked; the first is drawn on top. Several faint layers with growing offsets and blur make the soft, realistic shadows modern interfaces use, which a single dark shadow cannot match. Presets cover a subtle edge, a card, a floating panel, soft layered elevation and a pressed (inset) look. The preview box’s corner radius and colour can be changed so you see the shadow in context, and the CSS comes out ready to paste, wrapped onto lines when there are several layers.

How to use it
  1. Pick a preset, or start from the card shadow.
  2. Choose a layer and set its offsets, blur, spread, colour and opacity.
  3. Add layers for softer, more natural depth, or switch a layer to inset.
  4. Copy the CSS.
Limits and your data
  • Shadows designed on a white surface look different on dark backgrounds; in dark mode, lighter surfaces usually show depth better than darker shadows.
  • Very large blur values on many elements can slow scrolling on low-end phones.
  • box-shadow follows the box’s border-radius but not the shape of transparent images; for those, use filter: drop-shadow().
  • The preview box stays light in both themes so the shadow reads as it would on a typical light page.
  • The shadow is drawn in your browser; nothing is sent.

Questions

What is the difference between blur and spread?

Blur softens the shadow’s edge; spread makes the whole shadow bigger or smaller before blurring. A negative spread with a large blur gives a soft shadow that stays under the box.

How do I make a shadow on one side only?

Offset it towards that side and use a negative spread about as large as the blur, so it does not show on the others: 0 8px 8px -8px puts a shadow only below.

Why use several shadow layers?

Real shadows are sharp and dark near an object and soft further away. Stacking layers with doubling offsets and blur imitates that.

What does inset do?

It draws the shadow inside the box, as if the box were pressed in — useful for input fields and pressed buttons.