CSS Box Shadow Generator
Create beautiful box-shadow effects visually — stack multiple layers, fine-tune offset, blur, spread and opacity, and copy clean CSS or a Tailwind class.
Presets
Shadow layers
Layer 1
Preview box
Output
What Is box-shadow?
The CSS property that adds one or more shadows around (or inside) an element's box.
Each shadow is described by up to six values: horizontal offset, vertical offset, blur radius, spread, colour and the optional inset keyword. Positive offsets move the shadow right and down; blur softens its edge; spread grows or shrinks it before blurring.
Shadows follow the element's border-radius, don't take up layout space and don't affect neighbouring elements — so you can add them freely without breaking a layout.
Real-world shadows are rarely a single hard blur. Designers stack several layers: a tight, darker shadow for contact and one or more large, faint shadows for ambient light. That's what the Layered preset does, and why this generator supports multiple layers.
Use low opacity (5–25%) and a dark, slightly tinted colour rather than pure black. On dark backgrounds, shadows are barely visible — use lighter surfaces or a subtle glow instead.
box-shadow Values Explained
box-shadow: [inset] x y blur spread colour; — separate multiple shadows with commas.
Offset X
Horizontal distance. Positive moves the shadow right, negative left. 0 centres it horizontally.
Offset Y
Vertical distance. Positive moves it down — light from above is the most natural look.
Blur radius
How soft the edge is. 0 gives a hard edge; larger values spread the shadow wider and fainter. Can't be negative.
Spread
Expands (positive) or shrinks (negative) the shadow before blurring. 0 0 0 3px draws a crisp ring like a focus outline.
Colour
Use a translucent colour such as rgba(15, 23, 42, 0.15) so the background shows through.
inset
Draws the shadow inside the box, making it look pressed in — handy for inputs and toggles.
How to Use the CSS Box Shadow Generator
Get your result in under ten seconds.
Start from a preset
Pick Soft, Layered, Hard or another preset — or start from the default shadow.
Adjust the layers
Select a layer and drag the sliders. Add layers for depth, toggle inset, and change the box to match your design.
Copy the code
Choose CSS or Tailwind output and press Copy CSS.
Why Use the CSS Box Shadow Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Multiple layers
Stack up to 10 shadows for realistic, smooth depth — the way modern design systems do it.
Exact values
Sliders for speed, number boxes for precision — type values beyond the slider range when you need to.
Tailwind output
Get a ready-made shadow-[…] arbitrary-value class for Tailwind CSS.
Minimal CSS
Zero values and zero spread are left out so the output stays short and readable.
Lag-free
Renders once per frame while you drag, so it stays smooth on phones.
Private
Runs entirely in your browser — nothing is uploaded.
Frequently Asked Questions
Use a small Y offset, a large blur and low opacity — for example 0 10px 30px rgba(0, 0, 0, 0.12). Even better, add a second tight layer such as 0 2px 4px rgba(0, 0, 0, 0.08). The Layered preset is a good starting point.
Blur softens the shadow's edge; spread changes the shadow's size before it's blurred. A spread of 0 keeps the shadow the same size as the box.
Offset the shadow towards that side and use a negative spread equal to the blur, e.g. 0 8px 6px -6px rgba(0,0,0,.4) for a bottom-only shadow.
One or two shadows are cheap. Very large blur values on many elements, or animating box-shadow, can slow scrolling on low-end devices. To animate, put the shadow on a pseudo-element and animate its opacity instead.
Dark shadows on dark surfaces have almost no contrast. Use a lighter surface colour for the element, or switch to a coloured glow (try the Glow preset).
Paste the class (e.g. shadow-[0_8px_24px_rgba(15,23,42,0.18)]) into your element's class list. Spaces are written as underscores, as Tailwind's arbitrary values require.
Yes. The shadow follows the element's border-radius automatically — set the corner radius in the preview to match your component.
Only in your own browser (local storage), so it's still there next time. Press Reset to clear it.