Skip to content
Free Tool Arena

Developer Utilities · Free tool

Box Shadow Generator

Build any CSS box-shadow with a live preview — offset, blur, spread, color, inset. Copy the rule in one click.

Updated April 2026
Shadow Layers
CSS
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.2);

What it does

Visually build any CSS box-shadow: offset-x, offset-y, blur, spread, color, and optional inset. Stack multiple layers for soft, realistic shadows. The live preview shows the exact result, and you copy the full CSS rule in one click.

Related design tools: border radius generator, gradient generator, color picker, and contrast checker.

How to use it

  1. Adjust offset, blur, spread, and color sliders.
  2. Add additional shadow layers if you want stacking.
  3. Toggle inset for inset shadows.
  4. Copy the resulting CSS rule.