Understanding the currentColor Keyword in CSS

Now that that we have custom properties in CSS, we pretty much have full power over our own variables in CSS. But even before those become helpful, we can use a keyword available since the CSS Color Module Level 3, currentColor, to keep colors consistent within elements.

currentColor acts like a variable for the current value of the color property on the element. And the Cascading part of CSS is still effective, so if there’s no defined color property on an element, the cascade will determine the value of currentColor.

Usage

currentColor is useful when you want a certain color to be consistent in an element. For example, if you want an element to have a border color that’s the same as the element’s text color, using currentColor makes a lot of sense because then if you decide the main text color you can change the value at only one place.

An Example

Words are all well and good, but nothing beats an example! Let’s make use of currentColor at a few different places in a simple example. You’ll see how currentColor can also be really useful as the value for the fill properties of SVGs.

Here’s what our final example looks like (hover over it if you can):

See the Pen bGprJqg by alligatorio (@alligatorio) on CodePen.

First, our markup:

<div class="outer-circle">
  <svg width="150" height="150" viewBox="0 0 322 322">
    <g fill="none" fill-rule="evenodd">
      <circle class="main-circle" cx="161" cy="161" r="161"/>
      <circle class="left-eye" fill="#6A76C0" cx="108" cy="109" r="25"/>
      <path d="M112 239h99a49.5 49.5 0 0 1-99 0zM161 201c13.8 0 25-26.2 25-40 0-9.2-8.3-17.5-25-25-16.7 7.5-25 15.8-25 25 0 13.8 11.2 40 25 40z" fill="#51BAB6"/>
      <circle fill="#6A76C0" cx="221" cy="109" r="25"/>
    </g>
  </svg>
</div>

As you can see, there’s nothing fancy going on with the markup, just an outer div and a simple SVG graphic in it.

The magic ✨ happens in the CSS styles:

.outer-circle {
  color: gold;
  border: 10px solid currentColor;
  box-shadow: 0px 0px 15px currentColor;

  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 2rem auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.main-circle {
  /* inherited from parent */
  fill: currentColor;
}

.outer-circle:hover .left-eye {
  fill: currentColor;
}

What’s more, the value for color can just a well be a CSS variable and currentColor will still end up with our expected value:

See the Pen BaKdEZQ by alligatorio (@alligatorio) on CodePen.

The markup is basically the same, except for an additional class on the outer circle:

<div class="outer-circle alternative">
  <!-- ... -->
</div>

And then in the styles we override the color from .outer-circle and use the value of one of the CSS variables available on this site instead:

.alternative {
  color: var(--code);
}

Wrapping Up

Your mileage with currentColor may vary, because many properties that include a color will default to the current value of color anyway (border, box-shadow, text-decoration…). Add that to the fact that we now have full blown CSS variables, you may find that you don’t pull currentColor from your bag of tricks very often these days. Still though, it’s there if the need ever arrises. It can become especially helpful to make sure SVG icons are filled with the same color as the current text color.

Browser Support

Can I Use currentcolor? Data on support for the currentcolor feature across the major browsers from caniuse.com.