Skip to content
All tools

Depth

CSS Box Shadow Generator

Shape elevation with precise position, blur, spread, opacity, and color controls.

Preset

Horizontal

0px

Vertical

24px

Blur

60px

Spread

-12px

Opacity

0.22

SURFACE
box-shadow: 0px 24px 60px -12px rgba(17, 24, 39, 0.22);

Use shadow to explain elevation

  1. Start with a preset, then adjust horizontal and vertical offsets to choose the direction of the shadow.
  2. Blur softens the edge; spread grows or contracts the shape before it is blurred. Use opacity to control the strength against your actual background.
  3. Compare the shadow and surface colors, then copy the CSS into the element that should appear elevated.

Shadows do not reserve layout space and may be clipped by an ancestor with overflow hidden. Check dark backgrounds separately. Avoid using shadow as the only indication of focus or an interactive control.

CSS box-shadow on MDN

Combine a contact shadow with a soft shadow

.surface {
  box-shadow:
    0 2px 4px rgb(17 24 39 / 8%),
    0 16px 40px -12px rgb(17 24 39 / 18%);
}

The small shadow defines the near edge; the larger one adds depth. The editor controls one shadow at a time. To layer shadows like this example, separate the values with commas in your stylesheet.