CSS Text-Shadow color

Question

Is it possible to make the text-shadow property inherit color? like maybe:

text-shadow: 1px 2px inherit;

I know this won't work but if there is another way, please show me.

Answer 1

You can try currentcolor:

The currentColor keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

p {
  text-shadow: 1px 2px currentcolor;
}

<p style="color: red">Red</p>
<p style="color: green">Green</p>
<p style="color: blue">Blue</p>

Answer 2

Well if I were you I would do that with css. I'd define some clases for text color and depending on it, change the color of shadow. Like this:

.text-red p{
  text-shadow: 1px 1px red;
}
.text-green p {
  text-shadow: 1px 1px green;
}
.text-blue p {
  text-shadow: 1px 1px blue;
}

And then in my HTML

<div class="text-blue">
<p>
     My shadowed text
</p>
</div>

Here is a Fiddle: https://jsfiddle.net/pzvuw07g/1/
I don't know other way. I hope it will help!

Answer 3

You actually have only to set the shadows properties, text-shadow color, like box-shadow, outline or border inherits the color used by text, wich is indeed currentcolor, default value :)

p {
  text-shadow: 1px 2px ;
  outline: solid;
  outline-offset: 5px;
  border:solid;
  box-shadow:0 0 5px;
}

<p style="color: red">Red</p>
<p style="color: green">Green</p>
<p style="color: blue">Blue</p>