// Tutorial //

Understanding the currentColor Keyword in CSS

Published on September 1, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Understanding the currentColor Keyword in CSS

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!