Layered CSS, built locally

CSS Box Shadow Generator

Build up to eight outer or inset shadows, arrange their paint order, tune the preview surface, and copy standards-based CSS. Nothing is uploaded or saved.

Design shadow layers

Layers

1 / 8

Editing layer 1

Horizontal offset
Vertical offset
Blur radius
Spread radius
Opacity

Preview and CSS

The object uses the exact width and height shown. Scroll the preview when it is wider or taller than the available stage.

Shadow preview

Generated declaration

First layer paints on top
box-shadow: 0px 12px 30px -8px rgb(32 63 94 / 0.25);

Adjust a control or apply a preset.

How to build a useful shadow

  1. Choose a preset close to the depth or edge treatment you need.
  2. Tune offset first, blur second, and spread last. Negative spread can keep a soft shadow tight.
  3. Add layers for separate near and far shadows, then copy the declaration or complete rule.

The first comma-separated shadow is painted closest to the viewer. Use the arrow controls to change that order without rewriting CSS.

What the values mean

Horizontal and vertical offsets move the shadow. Blur must be zero or positive. Spread grows the shadow before blur and may be negative. inset draws inside the border box. Multiple shadows are comma-separated.

This generator emits the standard box-shadow property with modern space-separated RGB alpha syntax. Current browsers do not require vendor-prefixed copies.

Limits and accessibility

Shadows do not affect document layout and may be clipped by an ancestor with constrained overflow. Very large blurs and many layers cost more to paint, so this tool caps layers and values.

Do not use a faint shadow as the only focus indicator, boundary, or state cue. Test the finished component at different zoom levels and contrast modes. All work here remains in this browser tab; no CSS or settings are uploaded or retained.

Read the box-shadow reference