BrowserTools

Box Shadow Generator

Design CSS shadows visually

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-08-28
Free Private No uploads
What is Box Shadow Generator?

A 112-pixel square sits in the middle of the preview carrying whatever you have dialled in, so each change is judged on a real element rather than on a flat swatch. Five controls drive the shape: horizontal offset from -50 to 50 pixels, vertical offset across the same range, blur from 0 to 120, spread from -50 to 50, and opacity from 0 to 100 percent, with the colour taken from a native picker. The Layered checkbox switches between a single shadow and a three-layer version in which each successive layer is scaled up by a factor of 1.6, which is what produces a soft believable falloff instead of a hard ring. Inset is a separate switch and applies to every layer. Five presets — Soft, Material, Sharp, Neumorphic and Inset — load a known starting point you can then pull apart.

Craft single or layered CSS box shadows with sliders for offset, blur, spread, color and inset — previewed live on a real element and exported as clean CSS.

Private Box Shadow Generator In Your Browser

Box Shadow Generator is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Box Shadow Generator

1

Drag the Offset X, Offset Y, Blur and Spread sliders to set where the shadow falls and how far it grows or shrinks.

2

Pick the colour with the swatch and set the Opacity percentage; the rgba triple in the output tracks both.

3

Tick Inset to draw the shadow inside the element instead of outside it, or Layered (×3) to add two more scaled layers.

4

Press one of the Soft, Material, Sharp, Neumorphic or Inset presets to start from a known shape, then copy the CSS output.

Key Capabilities
  • The layered option emits three shadows whose offsets, blur and spread are multiplied by 1, 1.6 and 2.2 in turn.
  • Opacity is a control of its own rather than part of the colour, so the output carries a genuine rgba alpha value.
  • Five presets set several fields at once, and each is a starting point you can pull apart rather than a fixed snippet.
  • The preview element is given the exact declaration printed in the output box, so what you see is what will render.
Common Use Cases
  • A developer builds a raised card and checks that the shadow still reads against a white background at the alpha chosen.
  • A designer compares a Material-style multi-layer falloff with a single hard shadow at the same nominal elevation.
  • Someone styling a pressed button ticks Inset and dials a small vertical offset to get the sunken look.
Clear Answers

Frequently Asked Questions

What is the difference between blur and spread?
Blur sets how far the shadow fades out beyond its shape, so a larger blur makes the edge softer. Spread grows or shrinks the shadow before that fade is applied — a negative spread pulls the shadow inside the element, which is how a tight contact shadow is made.
Why does a one-pixel offset shadow look dirty on a white card?
Usually the shadow is too dark for its blur radius. A large blur with a low alpha reads as ambient elevation; a small blur at full opacity reads as a hard drop. Try the Soft preset and then lower the opacity before adding any offset.
Do these work in email and old browsers?
Yes, box-shadow including the inset keyword is widely supported. What will not survive is anything layered on top of it with a filter or a clip, so keep email versions to a single shadow on a solid background.
Can I get a coloured glow instead of a shadow?
Set the offset to zero, push the spread well above zero and leave the blur high, then pick a saturated colour. That combination is the standard recipe for the glow used around focusable buttons and active inputs.