How to Use CSS Box Shadow: Complete Guide with Examples

The CSS box-shadow property is one of the most versatile tools in a web developer's toolkit. It adds depth, dimension, and visual hierarchy to elements without requiring images or extra markup. From subtle card elevations to dramatic neon glows, box shadows can transform flat designs into polished, modern interfaces. This guide covers everything you need to know — from basic syntax to advanced techniques.

The Box-Shadow Syntax

The box-shadow property accepts up to six values:

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

Here's what each value does:

• inset (optional) — Makes the shadow appear inside the element instead of outside
• offset-x — Horizontal offset. Positive values push the shadow right, negative values push left
• offset-y — Vertical offset. Positive values push the shadow down, negative values push up
• blur-radius (optional, default 0) — How blurry the shadow is. Higher values = softer shadow
• spread-radius (optional, default 0) — How much the shadow expands or contracts
• color — The shadow color, usually with transparency via rgba() or hsla()

Basic Examples

Simple Drop Shadow

The most common use case is a subtle shadow that lifts an element off the page:

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

This creates a soft shadow directly below the element with no horizontal offset, 2px down, and an 8px blur. The rgba color with 15% opacity keeps it subtle and natural-looking.

Offset Shadow

For a more dramatic, directional shadow:

.card {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

This pushes the shadow 5px to the right and 5px down with a 15px blur, creating the illusion that light is coming from the top-left corner.

Sharp Shadow (No Blur)

Setting the blur radius to zero creates a hard-edged shadow that's popular in brutalist and retro design:

.card {
    box-shadow: 4px 4px 0 #000;
}

This creates a solid black offset shadow with crisp edges — perfect for bold, graphic design styles.

Inset Shadows

Adding the inset keyword flips the shadow to the inside of the element. This is useful for creating pressed or recessed effects:

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

Inset shadows are commonly used on form inputs to create a subtle "carved into the page" look. They're also great for creating inner glow effects when combined with lighter colors:

.highlight {
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
}

Multiple Shadows

One of the most powerful features of box-shadow is that you can stack multiple shadows on a single element by separating them with commas:

.card {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 2px 4px rgba(0, 0, 0, 0.07),
        0 4px 8px rgba(0, 0, 0, 0.07),
        0 8px 16px rgba(0, 0, 0, 0.07);
}

This layered approach creates a much more realistic, natural-looking shadow than a single shadow. Each layer gets progressively larger and lighter, mimicking how shadows actually behave in the real world. This technique is used by Google's Material Design and many modern UI frameworks.

Practical Shadow Recipes

Material Design Elevation

Material Design defines specific shadow levels for different elevation layers:

/* Elevation 1 - Cards */
.elevation-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

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

/* Elevation 5 - Navigation */
.elevation-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

Neon Glow Effect

Use colored shadows with large blur radii and no offset for glowing effects:

.neon-button {
    box-shadow:
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 40px #00ff88;
}

This creates a vibrant neon glow that's perfect for dark-themed designs, gaming interfaces, or attention-grabbing call-to-action buttons.

Soft UI (Neumorphism)

Neumorphism uses a combination of light and dark shadows on a matching background to create a "soft" 3D effect:

.neumorph {
    background: #e0e0e0;
    box-shadow:
        8px 8px 16px #bebebe,
        -8px -8px 16px #ffffff;
}

The light shadow (top-left) and dark shadow (bottom-right) create the illusion that the element is physically extruding from the background surface. While visually striking, use neumorphism sparingly — it can cause accessibility issues with low contrast.

Colored Bottom Border Effect

Use spread radius and offset to simulate a colored border on just one side:

.card {
    box-shadow: 0 4px 0 0 #3498db;
}

This adds a solid blue line at the bottom of the element without using an actual border, which means it doesn't affect the element's layout or box model. It's a popular technique for cards, tabs, and navigation items.

Hover and Transition Effects

Box shadows work beautifully with CSS transitions for interactive effects:

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

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

This makes the card appear to lift off the page when hovered, creating a satisfying interactive feel. The transition ensures a smooth animation between the two states. Combining box-shadow with a slight transform: translateY() makes the lift effect more convincing.

For more on CSS transitions and animations, check out our guide on CSS animation techniques.

Performance Considerations

Box shadows are rendered by the browser's compositor, and complex shadows can impact performance — especially on mobile devices or when animating. Here are some tips:

• Avoid animating box-shadow directly — It triggers a repaint on every frame. Instead, use opacity with a pseudo-element that has the shadow pre-applied
• Limit blur radius — Very large blur values (50px+) are more expensive to render
• Minimize shadow count — Each additional shadow in a stack adds rendering cost
• Consider filter: drop-shadow() — For non-rectangular shapes, drop-shadow follows the actual shape outline, though it's generally slower than box-shadow

The Pseudo-Element Trick

For butter-smooth shadow animations, use this technique:

.card {
    position: relative;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::after {
    opacity: 1;
}

By animating opacity instead of box-shadow, the browser can use GPU-accelerated compositing, resulting in a 60fps animation even on lower-powered devices.

Box-Shadow vs. Drop-Shadow vs. Text-Shadow

CSS offers three shadow-related properties, each with different use cases:

• box-shadow — Applied to the element's rectangular box. Supports inset, spread, and multiple shadows
• filter: drop-shadow() — Applied to the element's painted area (follows alpha transparency). No inset or spread support
• text-shadow — Applied only to text content. Similar syntax to box-shadow but without spread

Use box-shadow for cards, buttons, and containers. Use drop-shadow for irregular shapes like PNG icons with transparency. Use text-shadow for text effects and readability on background images.

Browser Support

The box-shadow property has excellent browser support — it works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Even Internet Explorer 9+ supports it (though IE is essentially extinct in 2026). No vendor prefixes are needed. You can use it confidently in production without any compatibility concerns.

Conclusion

CSS box-shadow is deceptively simple in syntax but incredibly powerful in practice. From subtle card elevations to dramatic neon glows and neumorphic interfaces, shadows are essential for creating depth and visual hierarchy. Master the fundamentals — offsets, blur, spread, inset, and stacking — and you'll be able to create professional shadow effects for any design style. Remember to consider performance when animating shadows, and use the pseudo-element opacity trick for the smoothest results.