CSS — Adding Additional Box Shadows

When you want to add a box shadow to an element, but don’t want to override any it might already have. (Jump to code)

Less-than-amazing solutions

We could copy the box-shadow property from the element in question, paste it and append our additional shadow at the end. Of course, this requires us to know the box-shadow on the target element, which might not always be possible (say, making a reusable .highlight-glow class).

StackOverflow says to put the shadow on an absolutely-positioned pseudo-element. This leaves us with a similar problem to the one we started with — the element in question might already have styles on the ::before or ::after that conflicts with ours.

My solution

Use CSS variables to apply box shadows.

.shadowy-figure { --box-shadow: .5em .5em 1em #333; box-shadow: var(--box-shadow);}

Later on, you can tack things on at the end of this variable, like so:

.highlight { box-shadow: var(--box-shadow), 0 0 .1em #fff inset;}

One drawback is that we cannot use this technique in several classes and apply them to one element. We can solve this problem when parent-var() is a thing in CSS — if it already is by the time you read this post, do let me know!