CSS Box Shadow Generator

CSS Box Shadow Guide

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radii, color, and an optional inset keyword.

Syntax

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

/* Multiple shadows */
box-shadow: 
  0 4px 6px rgba(0,0,0,0.1),
  0 10px 15px rgba(0,0,0,0.05);

Properties Explained

• offset-x — Horizontal offset. Positive = right, negative = left.
• offset-y — Vertical offset. Positive = down, negative = up.
• blur-radius — Higher value = more blur. 0 = sharp edge.
• spread-radius — Positive = shadow grows, negative = shrinks.
• color — Any CSS color value. Use rgba() for transparency.
• inset — Makes the shadow go inside the element.

Performance Tips

• Large blur radii can impact rendering performance on mobile
• Use will-change: box-shadow if animating shadows
• Consider using filter: drop-shadow() for non-rectangular shapes
• Multiple subtle shadows often look better than one heavy shadow

Browser Support

box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes needed since 2013+.