Box Shadow Generator

Build a box-shadow that reads as light rather than a smudge.

What you provide

Result

12px shadow, 15% opacity

Shadows work best when the light source is consistent across the page, which in practice means every shadow has a positive vertical offset and no horizontal one. If a card needs more depth, stack shadows rather than darkening one: a tight low-opacity shadow for the edge plus a wide faint one for the ambient falloff gives a much better result than a single heavy shadow.

Preview

0px 4px 12px rgb(0 0 0 / 15%)

CSS
box-shadow: 0px 4px 12px rgb(0 0 0 / 15%);
Diagnostic telemetry
Offset
0px, 4px
Blur
12px
Spread
0px
Colour
rgb(0 0 0 / 15%)
Opacity
15%
Type
outer

What this cannot tell you

  • Generates CSS in your browser from the values you set. It does not touch your stylesheet or your site.
  • The preview is a rough approximation. Shadows read differently against different backgrounds and at different sizes, so check the result in place before settling on it.

Take this with you

Box Shadow Generator on RunTheTests — free browser-based frontend tools, no sign-up.