How to Create the Perfect CSS Box Shadow
A box shadow is four numbers and a colour crammed into one CSS property, and the difference between an interface that looks considered and one that looks clip-arted is usually in those numbers. The Box Shadow Generator lets you adjust them while watching the result.
What each value does
Horizontal and vertical offset move the shadow. Think about where the light is. Almost every interface pretends the light is above, so the horizontal offset is usually 0 and the vertical is a small positive number - the shadow falls downward.
Blur softens the edge. This is the one that matters most. A shadow with no blur looks like a second rectangle; a generously blurred one reads as depth.
Spread grows or shrinks the shadow before the blur is applied. Often left at 0, occasionally made negative to pull a shadow in tight under an element.
Colour and opacity decide the weight. Pure black at full strength is what makes a shadow look cheap. Black at 8 to 15 percent is what makes it look expensive.
The rule of thumb that fixes most shadows
Blur should be around twice the vertical offset, and the opacity should be low enough that you have to look for the shadow to notice it. A card sitting 2px off the page with 6px of blur at 10% black reads as gently lifted. The same card with 10px offset, no blur and 50% black reads as a mistake.
Larger elements need proportionally larger, softer shadows - a modal floating above the whole page can carry far more than a button.
How to build one
Open the tool, move each slider while watching the preview, and copy the CSS when it looks right.
A shadow usually sits on a rounded element, and the two should agree. The Border Radius Generator handles the corners.
Shadows and dark interfaces
A shadow works by darkening what is behind it, which is why the technique mostly stops working on a dark background - black on near-black is invisible. Interfaces that support a dark mode usually solve this by separating surfaces with lightness rather than shadow: a card sits slightly lighter than the page behind it, and the shadow is reduced or dropped entirely.
If you want some sense of lift in dark mode, a very subtle light border along the top edge reads as a highlight and does the job a shadow would do in light mode. Reusing the same shadow values for both themes is the common mistake, and the result is cards that look flat and slightly dirty.
Common questions
Can an element have more than one shadow?
Yes - comma-separate them. A tight close shadow plus a wide soft one is how most design systems get a realistic lift.
What is an inset shadow?
The same property with the inset keyword, drawing the shadow inside the element instead of outside. Useful for pressed buttons and inputs.
Should shadows get stronger as elements rise?
Yes - that is the convention that makes layering readable. A card has a small shadow, a dropdown more, a modal most.
Does a large shadow affect performance?
Very large blurs on many elements can cost something on low-powered devices, but ordinary interface shadows are not a concern.
Ready to get the numbers right?