Comment by Alkshendra Maurya on "Changing box-shadow color in CSS?"

TL;DR

CSS variables(when they are fully supported) is the way to go. Or if you're using a CSS preprocessor, you can use variables for colors there.

Explanation

There's no property as box-shadow-color, nor will ever be. For a simple reason that you can use multiple colors in box-shadow.

So writing something like this is totally valid:

box-shadow: 3px 3px red, -1em 0 0.4em black;

box-shadow can get pretty complex this way, so a box-shadow-color property won't make sense here (more: developer.mozilla.org/en/docs/Web/CSS/box-shadow).

If you want to emulate the color change behaviour without writing a new rule though, you can resort to using CSS variables(as @Kleo mentioned). The support is a problem, but that would get better with time.

A logical approach towards doing this now would be using a CSS preprocessor with variables for colors. Otherwise, traditional approach works just fine.

Your comment about it not being supported is absolutely correct and I do not disagree. Your comment about using CSS variables is definitely a cool option, but unfortunately has very poor support right now.

Your comment and reasoning as to _why _it will never be supported, however, is in my opinion wrong. One need only look at border and border-radius to see how it's entirely possible to accomplish this.

Border accepts up to four entirely different sets of rules - one for each side - and yet it benefits from a plethora of different sub-rules and syntax to target specific sides or all sides together. I can either define all border colours at once with border-color, or I define just one with border-left-color. Same thing with border style, width, etc. Border radius works much the same way, with border-top-left-radius and the like. Having box-shadow-color and box-shadow-left-color makes sense and follows the standards set by other rules.

Search Hashnode