CSS Box Shadow Generator
Set offset, blur, spread, color, opacity, and inset, stack multiple shadow layers, watch the live preview, and copy the exact box-shadow CSS.
- Free, no account
- No watermark
- No usage limit
About the CSS Box Shadow Generator
A box-shadow generator is only as good as its preview, and most of them get the preview wrong. They show your shadow on a flat white card sitting on a flat white page. That hides the exact shadows you most need to see, a faint one at 12 percent opacity, an inset that's supposed to look recessed, the near-white highlight layer that neumorphism is built from. So you crank the shadow darker just to make it show up, paste it into your real design, and now it's a smudge behind the box.
This one previews on a checkerboard. A light shadow still reads against it, an inset actually looks pressed in, and a pale highlight layer doesn't disappear. So the shadow you dial in here is the one that lands in your page, rather than a darker guess you end up walking back later.
The rest is what you'd expect. A slider for each value (horizontal and vertical offset, blur, spread), a color swatch with a hex field next to it, an opacity slider that bakes the alpha straight into an rgba() value, and an inset toggle. Stack as many layers as you want with Add shadow layer and it joins them into one clean, correctly ordered box-shadow: line to copy. Everything runs in your browser, nothing gets uploaded, there's no sign-up, and it keeps working once the page has loaded.
How to use
- Set the offsets. Horizontal slides the shadow left or right, vertical moves it up or down. For the standard "light from above" look, leave horizontal at 0 and give vertical a small positive value like 4px.
- Add blur. Blur is edge softness. Zero is a hard, photocopier-sharp edge. Higher numbers feather it out into a soft glow, and almost every believable shadow needs at least a few pixels of it.
- Adjust spread only if you need it. Positive spread grows the shadow bigger than the box, negative pulls it in tighter. Leave it at 0 until you have a reason to touch it.
- Pick a color, then drop the opacity. This is the step people skip. Somewhere around 15 to 25 percent almost always looks more real than solid black.
- Toggle inset to move the shadow inside the box for a pressed or recessed look.
- Stack and copy. Hit Add shadow layer for depth, then Copy CSS and paste the whole declaration into your stylesheet.
Opacity is the whole trick
If your shadow looks fake, it's almost always the opacity. A solid #000000 shadow reads like a sticker glued behind the box, because nothing in the real world casts a fully opaque shadow. Ambient light bleeds into every shadow and lifts it toward whatever's behind it.
So you want a semi-transparent shadow, rgba(0, 0, 0, 0.2) rather than flat black. That's what the opacity slider does for you here. You pick a color, set the opacity, and it writes the alpha into an rgba() value, no manual conversion and no separate opacity property to remember.
At 20 percent a shadow is meant to be subtle, and subtle is close to invisible on a white preview against a white background. So you drag it up to 50 or 60 percent because that's the only way you can see it on the stage, you copy that, and in context it's far too heavy. Checking against a checkerboard keeps you honest about how faint the shadow really is. Dial in the recipe behind almost every modern interface, 0 horizontal, 4px vertical, 12px blur, 0 spread, black at 20 percent, and you'll recognize it on sight as the standard "card lifted off the page" elevation.
Stack layers for a shadow that looks real
A single shadow can only ever fake one thing. Real objects don't cast one shadow. Look at a card on a desk under normal room light and you'll see a tight, dark shadow right where it meets the surface plus a wider, lighter one spreading out past it. One CSS shadow gives you only one of those, and two layers give you both.
The move designers use is to pair a close, darker shadow with a distant, lighter one:
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2),
0px 8px 24px 0px rgba(0,0,0,0.12);
The first layer is small and tight and grounds the element with a crisp contact edge. The second is bigger, softer, and lighter, the ambient lift that makes it feel like it's hovering. Neither one reads as depth on its own, but together they do.
Order matters here, and it trips people up. Shadows paint front to back, so the first one in the list sits on top of the rest. You want the tight dark contact shadow first and the wide soft one behind it, not the reverse. The Add shadow layer button keeps that order for you so you're not counting commas to figure out which layer is painting over which. Two layers will cover most of what you need, and a third smooths the falloff if you're being fussy about it.
You can mix inset and outset layers on the same element too. An outer shadow to lift the whole card, plus a faint inset highlight along the top edge to give it a lit rim. That combination is a pain to eyeball by hand and easy here, since each layer gets its own set of sliders reading against the same live preview.
Frequently asked questions
Why is my inset shadow invisible?
Two usual causes. Either the blur and spread are so small the shadow tucks under the element's own edge, or you're viewing it against the same color as the element so there's no contrast. Inset shadows draw inside the box, over the background but behind the content, so they need a little blur and a color that differs from the fill before they'll register. Bump the blur, and check the effect somewhere the element and the shadow aren't the same shade.
What's the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element's rectangular box including its border-radius, whatever is actually visible inside it. filter: drop-shadow() follows the real rendered shape instead, so it respects the transparency in a PNG or the outline of an SVG icon. Reach for drop-shadow on irregular or cut-out shapes. The catches: it can't do inset, it can't stack multiple shadows the clean way this property can, and it applies to the element's children as well. For rectangles and rounded cards, box-shadow is the better fit.
Does a box-shadow take up layout space?
No. It's painted outside the box model and never affects layout, it won't change the element's size or shove its neighbors around. That's different from a border, which does occupy space. If you actually need the shadow's area to act as spacing, add your own margin or padding, the shadow won't do it for you.
How do I animate a shadow on hover without it looking janky?
Put transition: box-shadow 0.3s ease on the element and change the shadow value in the :hover rule. One gotcha: if you're animating in from nothing, transition from 0 0 0 0 transparent rather than from none, because none won't tween and you'll get an abrupt pop instead of a fade. When a heavy shadow is animating across a lot of elements, moving it onto a pseudo-element and animating that element's opacity is far cheaper for the browser than animating the shadow itself.
Can I get a shadow on only one side?
Yes, with negative spread. Offset the shadow toward the side you want, then set a negative spread big enough to cancel it everywhere the offset didn't reach. Something like 0px 8px 6px -6px rgba(0,0,0,0.4) leaves a clean strip along the bottom with nothing bleeding out the sides. Nudge the blur and the negative spread together until the visible edge is as tight as you want it.
Do big blur values slow things down?
For a static shadow, basically never. Animation is where it bites. Large blurred shadows are expensive to repaint every frame, and animating one across a lot of elements can drop the frame rate on phones and older machines. Keep animated blur modest, or move the shadow onto a pseudo-element and fade its opacity instead of animating the blur.