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 object.

I fully understand that box-shadow is not additive, thus it doesn't take the size of a parent as a reference.

But given the fact that I need to have a fully responsive site with objects scaling fluidly (not only on breakpoints), but this also poses a problem – I can set shadow to spread property only in absolute units (em or px).

Is there any solution to this? I thought about using inner container (for content) within container (for "shadow" – it's without blur), but this creates another problem – vertical centering of inner container.

Any solution? No jQuery please, just pure CSS.

Answer 1

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.

Answer 2

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.