CSS Box Shadow Generator
Stack multiple shadows into one CSS rule and watch the depth build up, rather than guessing at numbers.
Processed on your device — no upload
One shadow looks like a sticker; two or three look like an object above a surface. The recipe is a tight, nearly opaque layer for the contact edge and a wide, faint one with a negative spread for the ambient light. That is what the default here is — and it is why interfaces built from a single 10px blur always look flat.
How to use it
- Adjust the sliders.
- Add a second layer for depth.
- Copy the rule.
How it works
A shadow has four numbers and a colour. The first two move it horizontally and vertically. Blur softens the edge. It is the size of the transition, not of the shadow. Spread grows or shrinks the shadow before the blur is applied, and a negative spread is the trick behind a soft shadow that does not leak out at the sides.
One shadow is why interfaces look flat. Real light produces two distinct effects: a tight dark contact shadow directly beneath an object, and a wide faint ambient shadow around it. A single 0 4px 10px rgba(0,0,0,0.2) is neither, and it reads as a sticker rather than an object.
The default here is the two-layer recipe: a 1px, 6% opacity layer for the contact edge and a 20px, 12% layer with a −6px spread for the ambient. Turn one off and back on and the difference is immediate.
Inset draws the shadow inside the box — the same numbers, pushed inward. It is how a pressed button, an inlaid input field and a well are made. A tiny inset shadow on a text field is often what makes a form feel considered.
A worked example
Elevation as a system, not a slider. Pick three levels and use only those. A resting card gets the subtle pair; a dropdown gets a larger, wider version; a modal gets the largest. Every surface in the product then belongs to one of three heights, and nobody has to invent a shadow again.
Tint the shadow, do not use black. Pure black at 20% opacity always looks slightly dirty over a coloured background. Take the darkest colour from your palette instead — a very dark green under a green-tinted interface — and the shadow reads as shade rather than smudge. The colour picker here is for exactly this.
Light comes from above. Keep the vertical offset positive and the horizontal at zero unless you have a reason. Every interface the user has ever seen is lit from the top, and a shadow cast sideways looks wrong before anyone can say why.
Watch the cost. A large blur radius over a large element is one of the more expensive things a browser paints, and animating box-shadow repaints on every frame. If you need a shadow to grow on hover, animate the opacity of a pseudo-element that already carries the larger shadow instead.
The same restraint applies to corners — the radius generator is the other half of making a box look like a physical card.
Questions
What is the difference between blur and spread?
Blur is how soft the edge is. Spread grows or shrinks the whole shadow before blurring. A negative spread with a large blur gives a soft shadow that stays under the element.
Why does my shadow look cheap?
Almost always one layer and pure black. Use two — a tight dark one and a wide faint one — and tint the colour towards your palette rather than #000.
How many layers should I use?
Two for most things, three for something that needs to float above everything else. Beyond that the returns vanish and the paint cost does not.
What does inset do?
Draws the shadow inside the element instead of outside, which is how pressed buttons and recessed inputs are made.
Can I animate a box shadow?
You can, but it repaints every frame. For a hover effect, put the larger shadow on a pseudo-element and animate its opacity — that runs on the compositor.
Does the shadow affect layout?
No. It is painted outside the box and takes no space, so a large shadow can overflow a container and get clipped by overflow: hidden.
Should shadows change in dark mode?
Yes. Shadows barely read on a dark background — dark surfaces usually need a lighter background colour to signal elevation instead, or a subtle light border.
What about drop-shadow?
filter: drop-shadow follows the shape of the content, including transparency, so it is the right choice for a PNG logo or an irregular SVG. box-shadow always follows the box.
Related Web tools
Color Converter
HEX, RGB, HSL, HSV, CMYK
open$termiva contrast --wcagColor Contrast Checker
WCAG AA and AAA, with a fix
open$termiva palette --triadicColor Palette Generator
Harmonies and a full tint scale
open$termiva gradient --linearCSS Gradient Generator
Linear, radial and conic
open