Tag box-shadow

🌟 CSS box-shadow: Adding Depth and Style with Shadows

Shadows bring life and depth to flat web designs by adding subtle or dramatic effects around elements. The box-shadowproperty in CSS allows you to create shadows around elements’ boxes, enhancing visual hierarchy and aesthetics.

🧾 What is box-shadow?

box-shadow lets you apply one or more shadow effects around the box of an element. Shadows can be soft or sharp, colored or blurred, inset or outset, giving you great creative control.

🧬 Syntax

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

Breakdown of values:

ValueDescription
insetOptional keyword that changes the shadow inside the box instead of outside
<offset-x>Horizontal shadow offset (required, e.g., 5px)
<offset-y>Vertical shadow offset (required, e.g., 10px)
<blur-radius>Optional, defines the blur amount (default 0, e.g., 15px)
<spread-radius>Optional, size increase or decrease of shadow (e.g., 5px)
<color>Optional color of the shadow (e.g., rgba(0,0,0,0.5))

🎯 Examples

1. Simple drop shadow

.card {
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

Creates a soft, blurred shadow offset 4px right and 4px down.

2. Sharp shadow with spread

.button {
  box-shadow: 2px 2px 0 2px #888888;
}

A sharp shadow with no blur but spreading 2px beyond the element edges.

3. Inset shadow (inside the box)

.input {
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

Adds a subtle shadow inside the element, giving a sunken effect.

4. Multiple shadows

.avatar {
  box-shadow: 0 4px 6px rgba(0,0,0,0.2), 0 0 10px 3px rgba(255, 255, 255, 0.3);
}

Creates layered shadows for complex, glowing effects.

🔍 How It Works

  • Shadows are drawn behind the element’s content box.
  • Offsets move the shadow right/left and up/down.
  • Blur radius softens edges — higher values create more diffuse shadows.
  • Spread radius expands or contracts the shadow’s size.
  • Multiple shadows are separated by commas and rendered front-to-back.

🛠️ Tips & Best Practices

  • Use subtle shadows to add depth without overpowering.
  • Combine with border-radius to soften shadow edges around rounded corners.
  • Avoid heavy shadows on small text or thin elements for readability.
  • Experiment with colors other than black for creative effects.
  • Use inset shadows for pressed or embedded UI elements.

✅ Browser Support

box-shadow is widely supported on all modern browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 9+

🔚 Conclusion

The CSS box-shadow property is a powerful and flexible way to add dimensionality and polish to your web elements. From subtle depth to dramatic effects, mastering box-shadow can greatly enhance your designs.