snippetcssTip

The currentColor CSS keyword

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

keywordcurrentcolorthecss

Problem

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.
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.

Solution

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

Code Snippets

<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;
}

Context

From 30-seconds-of-code: current-color

Revisions (0)

No revisions yet.