Generate CSS box-shadow
Drag the offset, blur and spread sliders and watch a real card update as you go. Copy the CSS when it looks right, with an optional second layer that gives a shadow the contact edge real objects have. Inset shadows for pressed buttons and inputs are one checkbox away.
How to use the Box Shadow Generator
- Move the offset sliders to place the shadow, then raise the blur.
- Use spread to grow or shrink the shadow before it is blurred.
- Tick Inset for an inner shadow, or the second layer for a contact edge.
- Copy the generated CSS.
What each value does
The syntax is box-shadow: offset-x offset-y blur-radius spread-radius color, with an optional inset keyword in front. Only the two offsets are required.
- Offset moves the shadow. Positive Y pushes it down, which is what a light source above the page produces — the direction almost every interface uses.
- Blur softens the edge. It is roughly twice the standard deviation of a Gaussian blur, so a 24px blur fades over about 24px in each direction from the shadow edge, not 12px.
- Spread grows (positive) or shrinks (negative) the shadow shape before it is blurred. A small negative spread with a large blur is the trick behind most modern card shadows: the shadow stays tucked under the element instead of leaking out at the sides.
- Inset paints the shadow inside the border box instead of outside it. This is how pressed buttons, text inputs and inset wells are drawn.
Why one shadow rarely looks right
A real object casts two shadows: a tight, dark one where it touches the surface, and a wide, faint ambient one. A single large blurry shadow reads as fog, and a single tight one reads as a sticker. Layering two — comma-separate them, the first is painted on top — is what makes Material Design and every polished component library look physical:
box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12),
0 12px 32px rgba(11, 18, 32, 0.14);Keep both layers the same hue. Shadows tinted towards the background colour (a slight blue on a cool grey page, for example) look far more natural than pure black, which greys out the surface beneath.
Layout, clipping and performance
Shadows never affect layout. They are painted outside the border box and take up no space, so turning one on will not shift anything — but an ancestor with overflow: hidden will clip it, which is the usual reason a shadow mysteriously disappears inside a scroll container or a rounded card.
Large blur radii are expensive to paint, especially on many elements at once or during scrolling. Animating box-shadow repaints the element on every frame; a much cheaper approach is a pseudo-element holding the hover shadow whose opacity you transition, since opacity is composited on the GPU.
Dark interfaces and alternatives
Shadows work by darkening what is behind them, so on a dark background they barely register. Convey elevation there with a slightly lighter surface colour, a 1px border at low opacity, or a soft inner highlight along the top edge instead.
Finally, box-shadow follows the border box, so a transparent PNG or an irregular SVG gets a rectangular shadow. When you need the shadow to follow the visible shape, use the filter: drop-shadow() function instead — it respects the alpha channel, though it offers no spread parameter.
Frequently asked questions
How do I get a shadow on only one side?
Use a spread large enough to cancel the shadow on the other sides, or offset far enough that the blur never reaches them. For example 8px 0 12px -8px puts a shadow only on the right.
Why is my inset shadow invisible?
Inset shadows are drawn inside the padding box and are covered by an opaque background on a child element. Put the shadow on the element that has the background, not on a wrapper.
What is a good default card shadow?
Something like 0 1px 2px at 12% plus 0 12px 32px at 14% of a dark, slightly blue colour. Tick the second-layer option here to generate that shape.
Does box-shadow work in email?
Outlook on Windows ignores it entirely, and several clients strip it. Use a solid 1px border for definition in email instead.
Privacy
This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.
Last updated 2026-09-23.