CSS Shadow Generator

Build a realistic box-shadow from several layers.

Tap a snippet to copy it

How it works

  1. Tune offset, blur, spread and opacity.
  2. Add layers for depth.
  3. Copy the CSS.

Quick answers

Why use layers?
Real shadows fade gradually. Two or three light layers beat one heavy one.
What does inset do?
It draws the shadow inside the box.