CSS Box Shadow: Complete Guide with Examples

Understanding Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. It is one of the most widely used visual effects on the web, appearing in card layouts, buttons, modals, and navigation bars across millions of sites.

A single box-shadow declaration can transform a flat design into something that feels layered and tactile. Shadows create depth, guide the user's eye, and establish visual hierarchy without adding extra markup.

The property has been supported by every major browser since 2011 — no vendor prefixes needed. It works on any block-level or inline-block element and can be combined with border-radius for rounded shadow effects.

Syntax Breakdown

The full syntax for box-shadow is:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

Here is what each value controls:

• offset-x: Horizontal distance. Positive values push the shadow right, negative values push it left.
• offset-y: Vertical distance. Positive values push the shadow down, negative values push it up.
• blur-radius: Optional. The larger the value, the softer and more spread out the shadow becomes. Defaults to 0 (sharp edge).
• spread-radius: Optional. Positive values expand the shadow, negative values shrink it. Defaults to 0.
• color: Any valid CSS color. Using rgba() or hsla() with transparency is the most common approach for natural-looking shadows.
• inset: Optional keyword that makes the shadow appear inside the element instead of outside.

Example: box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15); creates a subtle shadow offset 4px right and 6px down with a 12px blur.

Common Shadow Patterns

Material Design Elevation

Google's Material Design uses layered shadows to indicate elevation levels. A card at elevation 1 has a soft, close shadow while a modal at elevation 5 has a larger, more diffused shadow:

/* Elevation 1 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Elevation 3 */
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Subtle Card Shadow

The most popular pattern for content cards: a barely-there shadow that lifts the card off the background.

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

Button Press Effect

Combine box-shadow with :active to simulate a physical button press:

.btn { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); transform: translateY(2px); }

Neumorphism

The neumorphic style uses two shadows — one light and one dark — to create a soft, extruded look:

box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;

This works best on light grey backgrounds (#e0e0e0 to #f0f0f0 range).

Multiple Shadows

You can stack multiple shadows by separating them with commas. The first shadow listed renders on top. Layered shadows look far more realistic than a single shadow because real-world light creates soft ambient shadows alongside sharper direct shadows.

box-shadow:
0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.04),
0 8px 8px rgba(0,0,0,0.02);

This layered approach distributes the shadow across multiple distances. The result is a smooth, organic shadow that looks much closer to how shadows behave in the real world. Each layer handles a different distance — close contact shadow, medium spread, and far ambient glow.

You can also combine inset and outset shadows on the same element for border-like effects or inner glow combined with outer depth.

Inset Shadows

Adding the inset keyword flips the shadow to the inside of the element. This is commonly used for input fields, pressed buttons, and container recesses.

input:focus { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

Inset shadows create the illusion that the element is recessed into the page. Combined with a darker background, they simulate depth convincingly.

A popular technique for text inputs is combining a subtle inset shadow with a colored outline on focus:

input:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(59,130,246,0.3);
outline: none;
}

The inset shadow adds depth while the outer ring (using spread with zero blur) provides the focus indicator.

Performance Tips

Box shadows are rendered by the browser's compositor, and large or numerous shadows can affect rendering performance, especially during animations.

• Avoid animating box-shadow directly. Changing box-shadow triggers a repaint on every frame. Instead, use a pseudo-element with the target shadow and animate its opacity. The shadow is painted once and the opacity change is handled by the GPU.
• Keep blur radius reasonable. A blur of 100px creates a massive blurred area that the browser must calculate for every pixel. Values under 30px are generally fine.
• Use will-change sparingly. Adding will-change: box-shadow promotes the element to its own compositor layer, which helps animation but increases memory usage. Only use it on elements that will actually animate.
• Consider drop-shadow for irregular shapes. For non-rectangular elements (images with transparency, clipped shapes), filter: drop-shadow() follows the alpha channel while box-shadow always wraps the bounding box.

Generate production-ready shadow CSS instantly with our Box Shadow Generator. Adjust offsets, blur, spread, and color visually, then copy the code.