Box-Shadow Generator
Design layered CSS shadows with live preview — then copy the CSS or Tailwind class. Free, private, no signup.
Shadow layers
Preview
CSS
Tailwind class
Presets
Start from a proven shadow, then fine-tune it above.
Box-Shadow Guide
How each value works, and tips for shadows that look natural.
The Syntax
x y blur spread colourOffsets move the shadow, blur softens it, spread grows or shrinks it. Add inset to put it inside the box.
Layer Shadows
shadow-1, shadow-2, …Real light makes a tight dark shadow and a wide soft one. Stacking two or three layers looks far more natural than one.
Negative Spread
0 20px 25px -5pxA negative spread with a larger Y offset keeps the shadow under the element, so it doesn't bleed out of the sides.
Keep Opacity Low
5–25%Shadows look best subtle. Tint them with your brand colour instead of pure black for a softer, more polished result.
Rings & Outlines
0 0 0 3pxNo blur and a spread acts like a border that doesn't change the layout — great for focus rings.
Performance
blur ≤ 50px on scrollVery large blurs on many moving elements can slow scrolling. For animated cards, animate opacity of a pseudo-element instead.
Why ShadowCraft?
ShadowCraft is a fast, lightweight shadow designer for web designers and front-end developers who want depth that looks real — without guessing numbers.
All processing happens entirely in your browser. Nothing leaves your device.