Why one shadow looks fake and five look real
Real objects are lit by a mix of a direct light source and soft ambient light bouncing around the room. The shadow close to the object is dark and tight, and it fades into a wide, faint halo further away. A single box-shadow can only model one of those at a time, so you get either a crisp sticker outline or a gray fog.
The fix is to stack several shadows in the same declaration. Each layer doubles the offset and blur of the one before it and carries only a small slice of opacity. Added together, they produce a falloff curve that eases out the way light actually does. That is exactly what the Smooth shadow button builds: five layers on a doubling curve, using the color, angle and strength of the layer you have selected.
.card {
box-shadow:
0px 1px 2px rgba(15, 23, 42, 0.07),
0px 2px 4px rgba(15, 23, 42, 0.07),
0px 4px 8px rgba(15, 23, 42, 0.07),
0px 8px 16px rgba(15, 23, 42, 0.07),
0px 16px 32px rgba(15, 23, 42, 0.07);
}
Reading the controls
- Offset X and Y set where the light comes from. Keep X near zero and Y positive for interfaces. Overhead light reads as natural; sideways light reads as a style choice.
- Blur controls edge softness. As a rule of thumb, blur roughly double the Y offset for soft UI shadows.
- Spread scales the shadow shape before blurring. Negative spread keeps a big soft shadow tucked under the card so it does not bleed past the sides.
- Opacity matters more than color. Most good interface shadows sit between 4 and 12 percent per layer.
Tint your shadows
Pure black shadows look dirty on colored backgrounds. Pick a dark, desaturated version of the background hue instead: navy shadows on a blue-gray page, warm brown on cream. The preview background picker exists for exactly this test. Drop in your real page color and adjust until the shadow feels like part of the scene.
Build an elevation scale
Design systems usually define three to five elevation levels as custom properties, for example --shadow-1 for buttons, --shadow-3 for dropdowns and --shadow-5 for modals. Generate each one here by changing the Y offset before you press Smooth, then keep the color and layer count consistent so the whole interface shares one light source.
Animate without jank
Transitioning box-shadow forces the browser to repaint every frame. For hover lifts on many cards, put the larger shadow on a ::after pseudo-element and transition its opacity instead. Opacity is composited on the GPU, so the effect stays smooth even on mid-range phones.
Inset shadows
Tick Inset to draw the shadow inside the box. Inset shadows suit pressed buttons, input wells and toggle tracks. Combine one inset layer with one outer layer for a subtle bevel without resorting to borders.
Frequently asked questions
What is a smooth or layered box shadow?
It is several low-opacity shadows stacked in one box-shadow declaration, each with a larger offset and blur than the last. The combined falloff looks like real ambient light instead of a single gray smudge.
Do multiple shadow layers hurt performance?
Five layers on a handful of cards is fine. Costs add up when you animate box-shadow on many elements, so animate opacity on a pseudo-element that holds the shadow instead.
What is the difference between blur and spread?
Blur softens the shadow edge. Spread grows or shrinks the shadow shape before blurring. A negative spread with a large blur keeps the shadow tucked under the element.
Should I use box-shadow or filter: drop-shadow()?
Use box-shadow for rectangular boxes. Use drop-shadow() when the shadow must follow transparent PNG or SVG edges, since box-shadow always follows the border box.