An SVG icon sitting next to a link often needs to share its exact colour, including when that colour changes on hover. Writing the same hex value in the link's CSS and in the icon's CSS works, until the day one of the two colours is changed without the other following along. currentColor removes that duplication entirely.
It is a colour keyword like any other as far as the browser is concerned, except it points to no fixed hue: it looks up the already-computed value of color on the exact element it is used on, live.
Definition
currentColor is a CSS keyword that reuses the current value of the CSS color property on the element in question. It can be used anywhere a colour is expected: a border, a shadow, a background, or an SVG fill.
.button {
color: #1a73e8;
border: 2px solid currentColor; /* takes #1a73e8, without repeating it */
}
.button:hover {
color: #0d47a1; /* the border follows automatically, no extra line */
}A use case: an SVG icon that follows the text
An SVG embedded directly in the HTML, rather than loaded as an image, can receive CSS like any other element. Giving its fill the value currentColor makes it follow the colour of the nearby text without ever duplicating the value.
.icon-link {
color: teal;
}
.icon-link svg {
fill: currentColor; /* the icon picks up the link's colour */
}border-color, when it is not specified at all, is already currentColor. Writing border: 2px solid; without naming a colour therefore produces a border that automatically follows the text, a default behaviour few developers know about.Where currentColor works, and where it stops
currentColor works on any property expecting a colour, including inside a CSS gradient such as linear-gradient(currentColor, transparent), or inside a box-shadow. It stops, however, at the edge of a separate document: an SVG loaded through an img tag never sees the CSS of the page displaying it, so currentColor has no effect there.
A use case: a focus outline that follows the text
A visible outline on the keyboard-focused element is an accessibility requirement, but hand-picking its colour for every component means keeping it up to date with every change to the visual identity. Giving that outline the value currentColor guarantees it always matches the text colour of the element in question, with no risk of an invisible outline on a background whose colour changed in the meantime.
.link:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}That setting pays off particularly well with a dark theme: the text colour changes between the two themes, and the focus outline follows it automatically, with no extra rule needed specifically for dark mode, or for any other colour theme added to the same site later on.
Frequently asked questions
currentColor work inside an SVG file loaded as an image?No, an SVG loaded with <img src="icon.svg"> behaves like an opaque image, isolated from the page's CSS. currentColor then has no value to fetch. Only an SVG embedded directly in the HTML, or imported as a component, genuinely inherits the surrounding colour.
currentColor be used inside a gradient?Yes, with no particular restriction: background: linear-gradient(currentColor, transparent) works exactly like with any other colour, and also follows any change to color on the element.
currentColor update if the colour changes through JavaScript?Yes, immediately: currentColor does not capture a value frozen at page load, it checks the computed colour every time it is needed, including after a change made by a script or by a CSS custom property.