CSS ‘currentcolor’ Keyword

The CSS currentcolor keyword can be used to refer to the current value of the color property.

The currentcolor property allows you to use the current value of the color property, without writing the actual color value.

This means, you can write the value once, but use it in multiple places. If you need to change the color, you only need to do it in one place (i.e. on the color property). All the currentcolor references will automatically use the new color.

Here's an example:

This is the equivalent of writing:

That probably looks like a pretty useless example, as the text and background are now the same color. You won't be able to see the text.

That's true. But there are plenty of places where currentcolor can come in handy.

Using currentcolor for Box Shadows

Here's a working example where we set the color of the box-shadow property to currentcolor. Tweak the color at the top to see how it changes everything.

You might've noticed that the border also takes on the current color, even though we didn't specify currentcolor for the border.

Why's that?

CSS borders have an initial value of "the value of the color property". In other words, if you don't specify a color, it will use the same color that the currentcolor resolves to.

Text Color on Backgrounds with currentcolor applied

If you apply the currentcolor keyword to the background color it will effectively hide the text. This is because they're both using the same color.

If you need to display text, one way to do it is to nest the text within its own element, then apply a separate color to that element.

You can even use the opacity property along with white (or another light color) to make the text blend in slightly with the background.

Like this:

You can still achieve this visual effect without using currentcolor. However, currentcolor allows you to do it when the color is defined elsewhere (and maybe even unknown).

Using a Text Shadow

Another way of dealing with text and backgrounds that have the same color is by using a shadow to the text.

This is more of a design decision — there are many cases where shadowed text isn't appropriate. But if your design calls for it, here's how that can be done.

Inheritance

When currentcolor is inherited, it is inherited as currentcolor (not as the actual color value). So it's not the color that cascades down, it's currentcolor. Therefore, any descendants will have their current color applied.

Here's an example of that: