CSS — What is currentColor keyword?

Did you know in CSS you can specify the color property once and use that value without specifying it again using the currentColor keyword?

Let’s start with the definition

The currentColor keyword refers to the current value of the color property of an element (after computing all the properties) and allows us to use it directly without explicitly specifying the color code.

Example

Instead of specifying the color code multiple times like this:

.my-class {
    color: red;
    background-color: red;
    box-shadow: 2px 2px 4px 0 red;
}

We can specify it once and reuse it. It also reduces the headache of changing color values everywhere.

.my-class {
    color: red;
    background-color: currentColor;
    box-shadow: 2px 2px 4px 0 currentColor;
}

---

Let’s explore this further

What if we don’t specify the color property?

In this case, if you re-look at the definition at the top, it takes the current value of the color property after computing all the CSS properties of that element. That means it’d take this value from its parent element. So, if there is no color property specified in any parent elements, it’ll take the default color set by the browser.

FYI: Since you can configure your OS theme, browsers also try to adopt them. Hence, there is no global default font color.

But… Can we fool currentColor by specifying multiple color values?

Can you guess what would be the value of currentColor if you do something like this?

.my-class {
    color: red;
    background-color: currentColor;
    color: blue;
}

Now, if you’ve understood the definition properly, you’d know the value of currentColor must be blue and not red. Because it takes the current value of the color property after computing all the CSS properties.

---

Why currentColor is in camelCase?

Some of you must’ve noticed that we’re using camelCase here. But CSS is case-insensitive! So yes, you can write whatever you like.

currentColor, currentcolor, CurrentColor, CURRENTCOLOR, cUrReNtCoLoR, etc. everything is valid!

---

Let’s look at some use-cases

Use the same font color in your SVG icon

Change the box shadow as per your font color

Or we can show some animation and change both font color and box-shadow without using JavaScript!

---

Though I only showed 3 examples, it is up to your imagination. Let us know how you can use this.

If you like this topic and the article, do let me know on Twitter and share the knowledge with everyone. Maybe I’ll create a separate article on the use-cases. If you didn’t like this article, still let me know what you didn’t like. I’ll surely try to improve this. Do follow me on Twitter if possible. That would mean a lot to me!