DEV Community


CSS — Adding Additional Box Shadows

dz4k profile image Deniz Akşimşek Originally published at on ・1 min read

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);}
Enter fullscreen mode Exit fullscreen mode

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;}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (0)

Editor guide