CSS Box Shadow Examples: Drop Shadow CSS Techniques and Patterns

The box-shadow property is one of the most versatile tools in CSS. With the right combination of values, you can create everything from subtle card lifts to dramatic neon glows. This guide provides hands-on css box shadow examples, explains the full drop shadow css syntax, and covers advanced css shadow effects like layered and inset shadows.

The box-shadow Syntax Explained

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

Each value controls a different aspect of the shadow:

• offset-x — Horizontal distance. Positive moves shadow right; negative moves it left.
• offset-y — Vertical distance. Positive moves shadow down; negative moves it up.
• blur-radius — How soft the shadow edge is. 0 = sharp edges; higher values = softer.
• spread-radius — Expands or contracts the shadow. Positive grows it; negative shrinks it.
• color — Any valid CSS color. Use rgba() for transparency.

The inset keyword (placed before offset-x) makes the shadow appear inside the element instead of outside.

8 Copy-Paste CSS Box Shadow Examples

1. Subtle Card Lift

A gentle shadow that lifts a card off the page — the most common drop shadow css pattern:

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

2. Medium Depth Card

More pronounced elevation, suitable for interactive components:

.card-md {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

3. Floating Button

Deep shadow that makes a button look physically raised:

.btn-floating {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

4. Sharp Hard Shadow (Retro / Flat Design)

Zero blur gives a hard-edged, retro look popular in indie app design:

.retro-card {
  box-shadow: 4px 4px 0px #1e293b;
}

5. Inset Shadow (Pressed / Sunken)

The inset shadow creates the impression that the element is pressed into the surface:

.input-sunken {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e8f0;
}

6. Colored Shadow (Brand Glow)

Using a colored, spread shadow creates a glow effect matching your brand color:

.btn-purple {
  background: #6366f1;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
}

7. Layered Shadows for Depth

Multiple comma-separated shadows stack from front to back. This technique mimics real-world material shadows with two layers — a tight near shadow and a wide far shadow:

.layered-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

8. Modal / Overlay Shadow

Deep shadow for modals that need to feel detached from the background:

.modal {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 20px 60px rgba(0, 0, 0, 0.3);
}

Understanding Spread Radius

Spread radius is the most misunderstood value in css box shadow examples. Here is what it does:

/* Default size shadow */
.normal { box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15); }

/* Larger shadow (expands by 4px on all sides) */
.grown { box-shadow: 0 4px 12px 4px rgba(0,0,0,0.15); }

/* Smaller shadow (contracts by 4px on all sides) */
.shrunk { box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15); }

Negative spread is useful for keeping a blurred shadow visible without growing wider than the element — common in the “blurred bottom shadow only” pattern:

.bottom-shadow {
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.2);
}

Inset Shadows in Depth

Inset css shadow effects are commonly used for:

• Form inputs — sunken appearance for text fields
• Pressed buttons — tactile feedback on click states
• Embossed labels — subtle depth on tags and badges

/* Active/pressed button state */
.btn:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(1px);
}

/* Deep inset well */
.input-well {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 8px rgba(0, 0, 0, 0.06);
}

Common UI Patterns

Elevated Card with Hover

.product-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s, transform 0.25s;
}

.product-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  transform: translateY(-3px);
}

Focus Ring via box-shadow

The box-shadow property is often used instead of outline for focus indicators because it respects border-radius:

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

Tips for Polished CSS Shadow Effects

• Use low-opacity rgba — Black at full opacity looks harsh; rgba(0,0,0,0.1) feels natural.
• Match light direction — If all your shadows cast downward (offset-y positive), they feel consistent.
• Layer two shadows — One tight, one wide. This mimics how real objects cast shadows.
• Animate with transition — Add transition: box-shadow 0.25s for smooth hover effects. Avoid animating shadows on large grids — they can be GPU-intensive.
• Dark mode — Shadows nearly disappear on dark backgrounds. Increase the spread, reduce blur, and use a slightly lighter dark color for the shadow.

Browser Support

box-shadow is supported by all browsers without vendor prefixes. The inset keyword, spread-radius, and multiple shadows are all fully supported.

Summary

From subtle card lifts to neon glows and inset pressed states, drop shadow css unlocks tremendous depth with minimal code. The 8 css box shadow examples in this guide cover the most common real-world patterns you will encounter. Experiment with layering two shadows — it is the single most effective technique for making UI feel premium.

Use our free CSS Box Shadow Generator to visually design and copy box-shadow values — adjust all parameters with sliders and see the result instantly.