Learn Computer Academy
বাংলা

CSS Box Shadow Generator

Stack shadow layers, drag them right on the box, and copy CSS that actually looks like a real shadow instead of one blurred blob.

Browse the CSS lessons

Layers (2)

Layer 1

Light-source mode

One angle drives every layer’s offset together, the way a single light source would — instead of setting each layer’s X/Y separately, which easily ends up physically inconsistent.

Smooth shadow generator

One elevation value builds a 5-layer soft shadow on an easing curve — the technique behind most modern soft shadows. Replaces the current layers.

Paste a box-shadow to import it

Drag the shape to move the active layer’s offset

Preview

Compare A / B

Save the current stack as A, keep editing as B, and see both side by side.

Presets

Generated CSS

.box {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25),
  0 4px 6px -2px rgba(0, 0, 0, 0.15);
}

Hover or tap a field to see what it does.

A shadow is a hint, not a border — don’t rely on it alone where contrast actually matters (e.g. marking an invalid form field).