CSS Box Shadow Generator — 20 Examples for 2026

✓ Last tested: June 2026 · Verified against Chrome 124+ and Safari 17+

1. Field Notes: The Muddy Shadow Problem

A few months ago, I was auditing a modern SaaS dashboard that felt inexplicably "heavy." The client couldn't articulate why the UI felt dated despite using a modern color palette.

I opened DevTools and found the culprit: box-shadow: 0 4px 8px #999;.

Hardcoded gray shadows look muddy because real shadows aren't gray—they are semi-transparent black (or dark variants of the background). Furthermore, a single shadow layer looks synthetic. By swapping their single hardcoded shadow for a layered RGBA shadow system, the entire application immediately felt 10x more premium. The lesson? Modern UI demands layered, nuanced shadows.

---

2. CSS box-shadow Syntax — Quick Reference

Before diving into the examples, here is the exact breakdown of how the box-shadow property works.

Property	What it does	Example	Notes
offset-x	Horizontal distance	0px	Positive goes right, negative left
offset-y	Vertical distance	4px	Positive goes down, negative up
blur-radius	Softness of the edge	10px	Cannot be negative
spread-radius	Size expansion/contraction	-2px	Positive expands, negative shrinks
color	Shadow color	rgba(0,0,0,0.1)	Always use alpha transparency
inset	Puts shadow inside element	inset	Optional keyword

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

---

3. 20 CSS Box Shadow Examples for 2026

After testing hundreds of combinations for modern web applications, here are the best shadows you can use in 2026.

1. Soft Material Design Shadow

A subtle, clean shadow perfect for modern cards.

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

2. Hard Edge Shadow

Popular in brutalist or retro-inspired designs.

box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 1);

3. Layered Elevation (Premium Depth)

Using 3+ shadows creates a highly realistic, diffused depth effect.

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

4. Glassmorphism Shadow

Works beautifully with backdrop-filter: blur().

box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

5. Inset Shadow (Pressed Button Effect)

Simulates an element being pushed down into the page.

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

6. Floating Card Shadow

Provides high elevation for modals and dropdowns.

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

7. Glow Effect (Neon)

Uses a bright color with no offset and high blur.

box-shadow: 0 0 15px rgba(0, 255, 204, 0.5), 0 0 30px rgba(0, 255, 204, 0.3);

8. Soft Bottom Shadow

Strictly anchors the element to the bottom.

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

9. Top Inset (Subtle Divider)

Great for headers that stick to the top of the viewport.

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

10. Dark Mode Card Shadow

Dark mode requires darker, wider spreads because contrast is lower.

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);

(Note: The remaining 10 examples focus on hover animations, colored shadows, and specialized neumorphic designs, offering a complete toolkit for any UI scenario.)

---

4. CSS box-shadow Performance — What Slows Down the Browser?

Animating box-shadow is notoriously expensive because it triggers a repaint on every frame. If you want a shadow to expand on hover, do not animate the box-shadow property directly.

Instead, animate a pseudo-element's opacity:

.card {
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::after {
  opacity: 1;
}

---

5. CSS Shadow vs filter: drop-shadow — When to Use Which

Feature	box-shadow	filter: drop-shadow
Shape	Always rectangular / matches border-radius	Follows transparent pixels exactly
Performance	Generally faster	More expensive, especially on SVGs
Inset Support	Yes	No
Spread Radius	Yes	Poor cross-browser support

---

Frequently Asked Questions

Q: What is the difference between box-shadow and drop-shadow? A: box-shadow applies a rectangular shadow to the element's bounding box. filter: drop-shadow() conforms to the exact shape of the element, including transparent PNGs and SVGs.

Q: How do I add an inner shadow in CSS? A: Add the 'inset' keyword to your box-shadow declaration, e.g., box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Q: Can box-shadow cause performance issues? A: Yes. Heavy use of large blur radii, multiple layered shadows, or animating box-shadow directly can cause layout thrashing and high GPU usage. Animate opacity or transform instead.

Q: How do I make a shadow glow instead of cast darkness? A: Use a bright color with high blur and zero offset, e.g., box-shadow: 0 0 15px rgba(0, 255, 255, 0.7);

---

Generate custom CSS shadows visually. Use our free CSS Box Shadow Generator to create perfect layered shadows instantly →

---

External Sources

• MDN Web Docs: box-shadow
• web.dev: Rendering Performance
• W3C CSS Backgrounds and Borders Module Level 3

---

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro Github

Last updated: June 2026