CSS Box Shadow Generator
Visually generate CSS box-shadow declarations. Drag X/Y offset, blur, spread, color, opacity and inset toggle with a live preview. 8 curated presets. Copy clean CSS instantly. 100% browser-based, free, no signup.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.15);
Live Preview
Every slider drag updates the preview box in real time — see exactly how your shadow looks before copying the CSS. No build step, no guesswork.
Pixel-Perfect CSS
Outputs a clean, copy-ready `box-shadow:` declaration. Spread and blur are in `px`; the color is emitted as `rgba(r, g, b, a)` with the alpha baked in. One click to copy.
8 Curated Presets
Hand-picked professional shadows — subtle drop, soft float, sharp edge, big float, long drop, inset border, emerald glow, amber glow. Pick one at random with `crypto.getRandomValues`.
100% Private
All math runs in your browser. No CSS is uploaded, logged, or sent to any server. No signup, no daily limit, works offline once loaded.
What is a CSS box-shadow?
A `box-shadow` declaration adds one or more drop shadows to an element. The full syntax is `box-shadow: <inset?> <x-offset> <y-offset> <blur-radius> <spread-radius> <color>;`. The X and Y offsets move the shadow, blur softens its edges, spread expands (positive) or contracts (negative) its size, and `inset` turns it into an inner shadow.
How do I make an inset (inner) shadow?
Tick the "Inset" checkbox. The CSS output will prefix the value with the `inset` keyword, e.g. `box-shadow: inset 0 0 0 2px rgba(0,0,0,0.20);`. Inset shadows render inside the element's border, useful for depressed / neumorphic looks.
What's the difference between blur radius and spread radius?
Blur radius (`blur`) controls how soft the shadow's edges are — 0 means a sharp copy of the element's shape, larger values produce a softer, more diffused shadow. Spread radius (`spread`) grows (positive) or shrinks (negative) the shadow's overall size by that many pixels in every direction. A negative spread with a large blur produces the popular "floating card" look.
How is the alpha opacity applied to the color?
The opacity slider (0-100%) is converted to a decimal alpha and emitted as part of an `rgba(r, g, b, a)` color. For example, opacity 25% on `#000000` becomes `rgba(0, 0, 0, 0.25)`. This keeps the CSS self-contained — no separate `opacity` or `color` overrides needed.
Can I layer multiple box-shadows?
This tool generates one shadow at a time so the controls stay simple. To combine multiple shadows in your final CSS, separate each with a comma, e.g. `box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 25px rgba(0,0,0,0.15);`. You can generate each layer here, copy it, and join them by hand in your stylesheet.
Is this tool free and private?
Yes. The Box Shadow Generator is 100% browser-based, free forever, and requires no signup. Your settings and the generated CSS never leave your device — there are no server calls of any kind.
Ready to use the CSS Box Shadow Generator?
Free, no signup, no watermark. 100% browser-based. Your data never leaves your device.
Open the tool