Is it possible to change only the color of text shadow?

Question

I have 9 differently colored buttons (red, orange, yellow, green, blue, purple, pink, off-white and slate) and I was wondering if it was possible to manipulate and alter only the color of the text-shadow CSS property for these buttons, while keeping the other values the same?

For example, I have two different classes; one is for buttons with 11px font size and the other is for 14px font size (standard across my website):

.button-11 {
    font-size: 0.8em;
    border-width: 0.09091em;
    border-style: solid;
    padding: 0 0.90909em;
    text-shadow: 0.09091em 0.09091em 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
}

.button-14 {
    border-width: 0.07143em;
    border-style: solid;
    padding: 0 0.71429em;
    text-shadow: 0.07143em 0.07143em 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
}

For those unaware, I have two separate classes because each font size requires different values for the borders and text shadow, since I'm using the em measurement - 0.09em equates to 1px at font size 11px, and 0.07em equates to 1px at font size 14px.

So, in order to cut down on the CSS file size, it would help greatly if I could simply change the color of the text-shadow CSS properties without having to include the other values.

Does anyone know if this is possible?

Thank you.

Answer 1

Yes, this can be accomplished using CSS variables!

As others have pointed out, an official text-shadow-color property does not exist. However, CSS will let you create your own "custom property"—aka CSS variable—and use it in your button's CSS.

Let's create a variable called --my-shadow-color. Any name will do, but it must start with --.

Create a CSS variable

To make it globally available so you can use it as a default, put it inside the special :root selector:

:root {
  --my-shadow-color: gray;
}

button {
  text-shadow: 1px 1px var(--my-shadow-color);
}

The shadow will now be gray by default. But you can override it for each different button class. Note that you can define (or redefine) CSS variables inside any selector—:root is just the most general. As with regular CSS properties, more specific selectors will trump less specific ones.

Override the variable for different selectors

You can now override the color for any specific selector. Let's create classes of .button-red and .button-blue to set the text-shadow color for our different buttons.

.button-blue {
  --my-shadow-color: blue;
}
.button-red {
  --my-shadow-color: red;
}

We can now control our shadow color by using the .button-blue and .button-red classes in our HTML:

<button class="button-blue">Blue</button>
<!-- ^ shadow will be blue -->

<button class="button-red">Red</button>
<!-- ^ shadow will be red -->

<button>Default</button>
<!-- ^ shadow will be gray -->

Answer 2

Unfortunately, no: it seems (according to the specification) that there is no box-shadow-color property.

The above left intact, though it was addressing the wrong properties; to address the question, though it seems that the same point is true of the text-shadow property, with the text-shadow-color similarly unsupported (and non-existent in the specification).