CSS3 Box shadow size – percent units?

Question

I\'m working on a project that needs to use CSS3 box-shadow property. That\'s fine, but I have found out that spread size of shadow can\'t be set to a percentage of parent objec

Answer 1

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.