Tutorial

Understanding the currentColor Keyword in CSS

Published on September 1, 2020
Default avatar

By Alligator.io

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel