CSS Box Shadow Examples: Complete Guide with Code

The CSS box-shadow Property

The box-shadow property adds shadow effects around an element's frame. It is one of the most versatile tools for creating depth, elevation, and visual hierarchy without images.

Syntax

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

• offset-x — Horizontal shadow offset. Positive moves right, negative moves left.
• offset-y — Vertical shadow offset. Positive moves down, negative moves up.
• blur-radius — How blurry the shadow is. 0 = sharp edge. Higher = softer.
• spread-radius — How much the shadow expands beyond the element. Can be negative to shrink it.
• color — The shadow color, including transparency via rgba().

The keyword inset at the beginning makes the shadow appear inside the element rather than outside.

Practical Examples

1. Simple Elevation (Material Design Style)

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

/* Medium elevation */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

/* High elevation (card hover state) */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

2. Soft Shadow (Most Popular)

box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);

This is the go-to shadow for cards, modals, and panels. Low opacity, large blur, no spread.

3. Hard Shadow (Retro / Brutalist)

box-shadow: 4px 4px 0 #000;

No blur radius — produces a sharp, offset shadow popular in retro and brutalist design trends.

4. Inset Shadow (Pressed/Sunken Effect)

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

Used for inputs in focus state, pressed buttons, and wells.

5. Colored Glow

/* Blue glow */
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);

/* Red glow */
box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);

/* Subtle brand glow */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);

Glows work well for focus rings, hover effects on CTAs, and decorative elements.

6. Multiple Shadows

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);

Layering multiple shadows with exponentially increasing sizes creates a more natural, realistic shadow — mimicking how real-world light diffuses.

7. Top Shadow Only

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

Negative offset-y sends the shadow upward. Useful for sticky footers and bottom navigation bars.

Button Hover Effect with box-shadow

.btn {
  background: #3b82f6;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

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

Performance Tip

box-shadow is a GPU-accelerated CSS property on modern browsers — animations using it are smooth. However, avoid applying it to elements inside heavy scroll areas on mobile where repainting can cause jank. In those cases, use filter: drop-shadow() or border tricks instead.

Browser Support

box-shadow has universal browser support — no prefixes needed. It is safe to use in all production environments.

Conclusion

CSS box-shadow is deceptively simple at first glance but incredibly powerful in practice. From subtle elevation to colored glows to retro hard shadows, a single property can dramatically change how an element feels. Use our Box Shadow Generator to experiment visually and find the perfect shadow for your design.