Color currentcolor
CSS currentcolor keyword explained with examples
What is currentcolor?
The CSS keyword currentcolorrepresents the value of an element'scolor property. It allows you to use the text color value for other CSS properties like borders, shadows, backgrounds, and SVG fills — keeping everything in sync automatically.
When you change the color property, every property using currentcolorupdates along with it. This is incredibly useful for creating themeable, DRY components.
currentcolor is case-insensitive — currentColor,CURRENTCOLOR, and currentcolorall work the same way. It's the only CSS keyword that inherits dynamically from the color property.Change the text color below to see how currentcolor cascades to all properties:
1. Borders with currentcolor
Borders default to currentcolor when no color is specified. But you can also explicitly use the keyword:
.box {
color: #3b82f6;
border: 3px solid currentcolor;
padding: 16px;
}currentcolor. The text and border are always the same color!2. Box Shadow with currentcolor
Apply consistent colored shadows that automatically match your text color:
.card {
color: #3b82f6;
box-shadow: 0 4px 12px currentcolor;
padding: 20px;
}currentcolor. Notice how the glow matches the text.3. SVG Fill with currentcolor
SVG icons often use fill="currentColor" so they automatically inherit the text color of their parent element. This is why icon libraries like Heroicons work seamlessly with any text color:
<svg viewBox="0 0 24 24" fill="currentcolor">
<circle cx="12" cy="12" r="10" />
</svg>
.icon-container {
color: #3b82f6;
}4. Gradients with currentcolor
Create gradients that fade from the current text color to transparent:
.banner {
color: #3b82f6;
background: linear-gradient(
to right,
currentcolor,
transparent
);
}5. All Together
Here's a component that uses currentcolor for border, shadow, and icon — all controlled by a single color property:
currentcolorHow Inheritance Works
The color property is one of the few CSS properties that is inherited by default. When you set color on a parent element, all child elements inherit it unless they override it. currentcolor resolves to whatever the computed value of color is at that point in the cascade:
.parent {
color: blue; /* Sets color for all children */
}
.child {
border: 1px solid currentcolor; /* border is blue */
box-shadow: 0 0 5px currentcolor; /* shadow is blue */
}
.child.special {
color: red; /* Overrides inherited color */
border: 1px solid currentcolor; /* border is now red */
}border-color property actually defaults tocurrentcolor already! Writing border: 1px solid without a color automatically uses the text color. The currentcolorkeyword is most useful for properties that don't default to it, like background, box-shadow, and outline.color: currentcolor — it would create a circular dependency. The currentcolor keyword is designed for properties other than color.