CSS Orbit

CSS generators & visual tools

Box shadowLayers · inset · elevation

Box shadow generator

Stack soft, layered shadows that look natural on light and dark backgrounds, then copy the CSS.

Preview

Same shadow, two surfaces
Light surface
Dark surface
px

Elevation presets

Styles

Layers

The first layer is drawn on top. Select a layer to edit it.

Selected layer

px
px
px
px
%

Layer 1 of 3 selected.

Your CSS

box-shadow:
  0 1px 3px rgb(23 20 42 / 0.08),
  0 4px 8px -2px rgb(23 20 42 / 0.08),
  0 10px 20px -4px rgb(23 20 42 / 0.08);

How to build a natural shadow

Real shadows are soft and layered: a tight, darker shadow close to the object and a wider, fainter one further away. Start from an elevation preset, then select a layer to fine-tune it. The preview applies the same value to a card on a light and a dark surface, because a shadow that reads well on white often disappears on a dark page.

  • Offsets move the shadow; a positive vertical offset suggests light from above.
  • Blur softens the edge; it cannot be negative.
  • Spread grows or shrinks the shadow before blurring. A negative spread with a large blur keeps a wide shadow from peeking out at the sides.
  • Opacity matters more than colour: most layered shadows use 4–20%.
  • Inset draws the shadow inside the box, for wells and pressed buttons.

To edit a shadow from your own stylesheet, paste its value (or the whole box-shadow: line) into the box under the code and press Load. Lengths must be in px.

Box shadow questions

Which layer is drawn on top?

The first one in the list. box-shadow paints its comma-separated layers front to back, so put the tight contact shadow first and the wide ambient one last.

Do box shadows hurt performance?

Static shadows are cheap. Animating box-shadow itself repaints on every frame; to animate elevation, fade the opacity of a pseudo-element that carries the larger shadow instead.

Why does my shadow look different in dark mode?

A dark shadow on a dark page has little contrast to work with. Lighter cards, a subtle border or a faint light-coloured outer glow usually read better there; the dark surface in the preview shows the problem straight away.