How to Use CSS box-shadow — A Developer's Complete Guide

The CSS box-shadow property adds shadow effects around an element, giving your layouts depth and visual hierarchy without extra HTML. You control the shadow's position, size, blur, spread, and color with a single line of CSS. Whether you need a subtle card elevation or a dramatic glow effect, mastering box-shadow is essential for modern web design. This guide covers the complete syntax, practical examples, performance considerations, and advanced techniques. If you prefer to build shadows visually rather than writing values by hand, freeboxshadow.app lets you generate and preview CSS box-shadow code instantly in your browser, with no sign-up required.

What Is the box-shadow Syntax?

The box-shadow property accepts one or more shadow layers separated by commas. Each shadow layer follows this syntax:

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

Here is what each value controls:

How Do Basic box-shadow Examples Work?

Start with these foundational patterns. Each example shows a single shadow applied to a card-style element.

The key principle: larger offset-y and blur values create a sense of greater elevation. Keep the color subtle, typically rgba(0,0,0,0.1) to rgba(0,0,0,0.2), for natural-looking depth.

/* Subtle card shadow */
.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Elevated card on hover */
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

How Do You Layer Multiple Shadows?

Comma-separate multiple shadow declarations to create realistic, layered depth. Designers often combine a tight, darker shadow with a larger, softer one to mimic real-world lighting. This technique is what Material Design and modern card UIs rely on.

/* Layered shadow for natural depth */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Three-layer premium shadow */
.card-premium {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 8px 16px rgba(0, 0, 0, 0.09),
    0 16px 32px rgba(0, 0, 0, 0.06);
}

You can experiment with layered shadows interactively using freeboxshadow.app — add multiple shadow layers, adjust each independently, and copy the generated CSS.

What Are Useful Spread Radius Tricks?

The spread radius is the most versatile and least understood parameter. It expands or shrinks the shadow shape before blurring, enabling effects that go beyond simple drop shadows.

Create a border with box-shadow: Use zero blur and a small spread to simulate a border that does not affect layout:

/* Shadow-based border (no layout shift) */
.element {
  box-shadow: 0 0 0 2px #C49A2A;
}

/* Focus ring using spread */
.input:focus {
  box-shadow: 0 0 0 3px rgba(196, 154, 42, 0.3);
}

One-sided shadows: Combine a positive offset with a negative spread to restrict the shadow to a single side. This is particularly useful for headers and navigation bars:

/* Bottom-only shadow */
.header {
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.15);
}

/* Right-only shadow */
.sidebar {
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.15);
}

Inset glow: Combine inset with spread and a color for an inner glow effect that works well on form inputs and buttons:

/* Inner glow on active button */
.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

How Does the inset Keyword Change box-shadow?

Adding inset flips the shadow to render inside the element instead of outside. The same offset, blur, and spread values apply, but the visual result is inverted. Inset shadows are common in form fields, pressed buttons, and neumorphic design patterns.

You can combine inset and outer shadows on the same element. The browser renders them independently, so mixing both is a powerful way to create depth on interactive elements like toggles and switches.

How Does box-shadow Affect Performance?

For static elements, box-shadow has negligible performance cost. The browser rasterizes the shadow once and caches the result. However, performance can degrade in specific scenarios:

• Animating box-shadow directly triggers a repaint on every frame. Instead, place your shadow on a pseudo-element (::after) and animate its opacity, which only composites.
• Very large blur radii (over 50px) on many elements increase the area the browser must paint. Keep blur values reasonable.
• Shadows on scrolling containers or elements that change size frequently can cause layout thrashing. Use will-change: transform sparingly to promote the element to its own compositing layer.

/* Performant shadow animation */
.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.card:hover::after {
  opacity: 1;
}

If you use freeboxshadow.app to design your shadows, you can see the output CSS instantly and test different blur and spread values before committing them to your production code.

Which Browsers Support box-shadow?

The box-shadow property has full support across every modern browser. According to Can I Use data, global support is above 98%. Here is the breakdown:

No vendor prefixes are needed. The -webkit-box-shadow prefix is obsolete and adds unnecessary bytes to your CSS. Write box-shadow unprefixed with full confidence.

What Are Common box-shadow Patterns for Web Design?

Here are battle-tested shadow values used by design systems across the industry. Copy these directly or use freeboxshadow.app to customize them visually.

/* Elevation 1: Subtle card */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06),
            0 1px 3px rgba(0, 0, 0, 0.1);

/* Elevation 2: Dropdown / popover */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -2px rgba(0, 0, 0, 0.1);

/* Elevation 3: Modal / dialog */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 8px 10px -6px rgba(0, 0, 0, 0.1);

/* Colored glow (accent highlight) */
box-shadow: 0 0 16px rgba(196, 154, 42, 0.4);

/* Neumorphic raised */
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.08),
            -6px -6px 12px rgba(255, 255, 255, 0.8);

/* Neumorphic pressed */
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.08),
            inset -4px -4px 8px rgba(255, 255, 255, 0.8);

Frequently Asked Questions

More Free Tools from Freesuite