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 the element has a defined width (except for a percentage width), you can create a custom property for the width and then use the custom property with the calc() function for box shadow.

For example, the CSS code below makes the "spread radius" of box shadow 20% of the div's width:

div {
    --width: 100px;
    width: var(--width);
    box-shadow: 0 0 0 calc(var(--width) * 0.2) #aaa;
}