CSS Box Shadow Guide

What Is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element’s frame. Shadows create visual depth, simulate elevation, draw attention to interactive elements, and add polish to modern web designs. From subtle card elevations to dramatic glow effects, box shadows are one of the most versatile tools in CSS.

Unlike older techniques that required images for shadow effects, CSS box shadows are rendered natively by the browser. They are lightweight, scalable, and easy to customize without touching any graphic editing software.

Box Shadow Syntax

The full box-shadow syntax includes up to six values:

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

• offset-x: Horizontal displacement. Positive values push the shadow right; negative values push it left.
• offset-y: Vertical displacement. Positive values push the shadow down; negative values push it up.
• blur-radius (optional): Controls how blurry the shadow is. 0 creates a sharp edge; higher values create softer shadows. Defaults to 0.
• spread-radius (optional): Expands or contracts the shadow. Positive values make it larger; negative values make it smaller. Defaults to 0.
• color: Any valid CSS color value. Using rgba() or hsla() with transparency is recommended.
• inset (optional keyword): Places the shadow inside the element instead of outside.

Basic Shadow Examples

Subtle card shadow (the most common use case):

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

This creates a soft shadow below the element, simulating gentle elevation. The low opacity (0.1) keeps it subtle.

Medium elevation:

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

A larger blur radius and slightly higher opacity create the impression of greater distance from the background.

Strong shadow for emphasis:

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

This works well for modal dialogs, dropdown menus, and elements that need to appear above the page content.

Layered Shadows for Realism

Real-world shadows are complex, with both a soft ambient component and a sharper directional component. Layering multiple box shadows creates more realistic depth:

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

The first shadow provides a broad, soft ambient shadow. The second adds a tighter, more defined shadow closer to the element. Together, they simulate natural light behavior far better than a single shadow.

Material Design popularized this approach with its elevation system, where each elevation level uses a carefully crafted set of layered shadows. Many design systems now use similar multi-shadow approaches.

Inset Shadows

Adding the inset keyword creates shadows inside the element:

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

Inset shadows are useful for:

• Input field depth: Creating a subtle “pressed in” appearance for text inputs and textareas.
• Button pressed states: Switching from an outer shadow to an inset shadow on click simulates a physical button being pressed.
• Container depth: Making sections appear recessed into the page.
• Neumorphism: The design trend that uses combinations of light and dark inset and outer shadows to create soft, extruded UI elements.

Creative Shadow Techniques

Beyond standard elevation shadows, box-shadow enables creative effects:

Glow effect: Using a bright color with a large blur radius creates a glowing halo:

box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);

Colored shadows matching the element: Instead of black or gray shadows, use a darker or more saturated version of the element’s background color. This creates a more natural, cohesive look.

Border-like effect: A shadow with zero blur and zero offset but a positive spread acts like an additional border that does not affect layout:

box-shadow: 0 0 0 3px #3b82f6;

This is commonly used for focus indicators because it follows the element’s border-radius and does not shift content.

Shadow on one side only: Using negative spread to eliminate the shadow from most sides:

box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.3);

The negative spread shrinks the shadow, and combined with the y-offset, it appears only below the element.

Interactive Shadow Transitions

Changing shadows on hover or focus creates engaging interaction feedback:

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}

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

The card appears to lift toward the user on hover. The transition property ensures a smooth animation between shadow states. Keep transition durations short (150-300ms) for responsive-feeling interactions.

This technique also pairs well with CSS gradient backgrounds for visually rich cards and buttons.

Performance Considerations

Box shadows are generally performant, but keep these guidelines in mind:

• Avoid very large blur values on many elements: Extremely large blur radii (50px+) on dozens of simultaneously visible elements can affect rendering performance, especially on low-end devices.
• Use will-change sparingly: If you animate box shadows, adding will-change: box-shadow to the element promotes it to its own compositing layer, which can improve animation performance at the cost of memory.
• Consider filter: drop-shadow() for non-rectangular shapes: Box shadow follows the element’s rectangular box. For shadows that follow the shape of transparent PNGs or SVGs, use the filter: drop-shadow() function instead.

Building Shadows Visually

While experienced designers can write box-shadow CSS from memory, fine-tuning multiple layered shadows with precise offsets, blur radii, and colors is much faster with a visual tool. A box shadow generator lets you adjust each parameter in real time and preview the result, then copy the CSS into your project.

Try our free CSS Box Shadow Generator — no signup required.