CSS3 Box shadow size – percent units?

I have found out that spread size of shadow can't be set to percentage of parent object

True. But you can set font-size on the parent object, then define the object size in ems, and use the same ems to define the box-shadow size.

Or, if your parent object happens to be the window, you can use viewport units: vw and vh.


If you're after an inset box-shadow you could use a radial-gradient background to mimic the behaviour. So instead of -

box-shadow: inset 0 0 100% #000;

You would use -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);

Support: FF16+, IE10+, Safari 5.1+

I can't find any definitive answer on when Chrome started supporting the property, but my current version (39.0.2171.65) definitely supports it.

ColorZilla is a pretty useful tool for generating radial (among other) gradients along with the necessary prefixes if you decide to go down this route.