CSS Box Shadow Generator
Runs on your device. Nothing is sent.Everything runs in your browser - nothing is sent anywhere.
Start from
Layers
Horizontal offset
Vertical offset
Blur
Spread
Color
Code
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Edit an existing shadow
Design CSS box shadows with layers, inset and smooth presets, see them live, then copy the CSS or a Tailwind class. Paste an existing shadow to edit it.
Build the box shadow you want by eye instead of guessing numbers. Start from a preset - soft, medium, hard retro, smooth layered, floating, inner, neumorphic or glow - then fine-tune each layer's offset, blur, spread, color, opacity and inset, with the preview updating as you drag. Shadows can have up to eight layers, which is how the most natural-looking shadows are made. Copy the result as CSS or as a Tailwind arbitrary-value class, share it as a link, or paste a box-shadow from your stylesheet to keep working on it.
Frequently asked questions
What do blur and spread do?
Blur softens the shadow's edge: 0 is a hard line, bigger values fade it out over more pixels. Spread grows (positive) or shrinks (negative) the shadow before it's blurred - a small negative spread with a large blur gives the soft, tucked-in shadows most modern interfaces use.
Why use several layers?
Real shadows are dark and sharp close to an object and get lighter and softer further away. One layer can't do both; stacking a few with doubling offsets and blur, like the Smooth layered preset, looks far more natural.
What is an inset shadow?
An inset shadow is drawn inside the box instead of outside, so the box looks pressed in - handy for input fields, wells and pressed buttons. You can mix inset and outer layers in one shadow.
Does box-shadow slow a page down?
A few shadows are cheap. Very large blurs on many elements, or animating box-shadow itself, can cost frame rate on slower phones; for animations, fade the opacity of a pseudo-element that already has the shadow instead.