CSS Box Shadow Examples

Real shadows come from one light source, usually above. That means a small downward offset, almost no sideways offset, and a negative spread so the shadow does not peek out around the edges.

Tint shadows to the surface or the element's own color instead of using pure black, and stack two or three layers with increasing blur for a natural falloff. If you can see the outline of a box behind the element, the blur is too tight for the spread.

The box-shadow property takes up to five values: horizontal offset, vertical offset, blur radius, spread radius and color, plus an optional inset keyword. For example, box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1) moves the shadow 4px down, blurs it over 8px, shrinks it by 2px on every side and colors it a soft, slightly blue black at 10% opacity.

You can stack several shadows by separating them with commas. Layered shadows are the key to realistic depth: a tight, darker shadow close to the element and a wider, lighter one further away imitate how real light falls off.

Instead of inventing a new shadow for every component, define a small elevation scale and reuse it. A common set has four or five levels: a hairline for cards resting on the page, a low shadow for hovered cards and buttons, a medium shadow for dropdowns and popovers, a high shadow for dialogs, and an extra-high shadow for toasts or floating panels.

Higher elevation means more offset, more blur and slightly more opacity. Keep the same light direction (usually from above) at every level so the interface feels like one physical space.

Shadows are much less visible on dark backgrounds, because there is little contrast between a dark shadow and a dark surface. Dark themes usually communicate elevation with lighter surfaces instead: each raised layer is a step lighter than the one below. A subtle 1px light edge (for example, a white border at 6% opacity) does more work than a shadow.

If you do use shadows in dark mode, increase their opacity and keep them tight so they read as edges rather than haze.

Box shadows are cheap to render on their own, but animating large, heavily blurred shadows on many elements at once can cause jank on low-power devices. If you need to animate elevation on hover, a common technique is to put the larger shadow on a pseudo-element and animate its opacity instead of the shadow values themselves.

Avoid applying big blurred shadows to very large elements or long scrolling lists, and prefer tight, low-blur shadows for repeated components like cards in a grid.