The currentColor CSS keyword

CSS, Visual · Nov 30, 2022

Modern CSS supports custom properties, yet the currentColor keyword precedes them by a few years. Thus, you might still find it in the wild and it is worth knowing what it does and how it works.

<p>My <span>background</span> is the same color as my <a href="#">text</a>.</p>
p {
  color: #101010;
}

p, p > * {
  background-color: currentColor;
}

a {
  color: #0077ff;
}

span {
  color: #fd203a;
}

currentColor contains the current value of the color property of the element. It is useful when you want to use the same color for multiple properties, such as border-color or background-color. It also respects the cascade, so if no value is provided for color, it will use the value of the color property of the parent element.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this