Colors The currentColor Keyword
currentColor is a CSS keyword that always resolves to the element's own computed color value, letting borders, shadows, and SVG fills automatically track the surrounding text color.
One Keyword, Always in Sync
currentColor is a special keyword you can use anywhere CSS expects a color value. Instead of a fixed color, it acts like a live reference: it always resolves to that element's own computed 'color' property — the same color being used for its text.
How the Value Resolves
If an element doesn't set its own 'color', that property is inherited from an ancestor, and currentColor follows right along with it. That means if you change the 'color' on a parent element, any descendant using currentColor for a border, shadow, or fill updates automatically — no need to hunt down every place the color was duplicated.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.alert {
color: #b91c1c;
border: 2px solid currentColor;
}
</style>
</head>
<body>
<div class="alert">This is an alert message.</div>
</body>
</html>The Classic Use Case: SVG Icons
SVG shapes default to a black fill unless told otherwise. By setting fill: currentColor (either in the SVG markup itself or from an external stylesheet), an icon automatically matches whatever text color surrounds it — including through hover states or theme/dark-mode changes — without ever hardcoding a hex value inside the SVG.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.icon-button {
color: #2563eb;
}
.icon-button svg {
fill: currentColor;
stroke: currentColor;
}
.icon-button:hover {
color: #1d4ed8; /* the icon updates automatically, no extra rule needed */
}
</style>
</head>
<body>
<button class="icon-button">
<svg width="20" height="20" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="8" />
</svg>
Icon Button
</button>
</body>
</html>- border-color — the border matches the text without repeating the value
- box-shadow — a glow or shadow tinted to match the element's color
- outline-color / text-decoration-color — accents that always track the text
- fill / stroke on SVG — icon color follows the surrounding text
- caret-color — the blinking text cursor matches the text color
The real payoff of currentColor is avoiding duplication: instead of writing the same color twice (once for text, once for a matching border, shadow, or icon), you declare it once and let everything else reference it. That keeps themes and dark-mode switches simple, since updating a single 'color' property cascades everywhere currentColor is used.
Exercise: Colors currentColor
What value does the currentColor keyword resolve to?
