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 em
s, and use the same em
s 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.