Question 1

What is shadow spread?

Accepted Answer

Spread grows (positive) or shrinks (negative) the shadow before blur is applied. A positive spread creates a halo; a negative spread keeps the shadow inside the element's bounds.

Question 2

Should I use inset shadows?

Accepted Answer

Inset shadows render inside the element. They're useful for pressed-button affordances and neumorphic effects, but readable depth usually comes from outset shadows.

Question 3

How do I avoid the 'AI default' shadow look?

Accepted Answer

Single hard shadows tend to look generic. Stack two or three layers — a tight near-surface shadow plus a softer ambient one — and bias the color slightly toward the surrounding hue instead of pure black.

Question 4

How do I make a shadow that still reads in dark mode?

Accepted Answer

Black shadows disappear against dark surfaces because there's nothing left to darken. Two things work instead: a hairline border a little lighter than the surface, or an inset highlight along the top edge that mimics a light source. Keep the drop shadow too, but expect it to do almost none of the work.

Question 5

What's the difference between box-shadow and drop-shadow?

Accepted Answer

box-shadow follows the element's border box, so a transparent PNG casts a rectangular shadow. filter: drop-shadow() follows the alpha channel, so it traces the actual shape — the right choice for logos, icons, and cutouts. drop-shadow has no spread parameter.

Question 6

Do box shadows hurt performance?

Accepted Answer

Large blur radii are expensive to repaint, and the cost scales with the blurred area rather than the element size. One big shadow is fine; dozens animating at once is not. If you need a shadow to change on hover, cross-fade a second pre-rendered layer's opacity rather than animating the shadow values.

CSS Box Shadow Generator

How the CSS Box Shadow Generator works

When to use the CSS Box Shadow Generator