currentColor: Browser Support, Use Cases, Known Issues

What is currentColor?

currentColor is a CSS keyword from the W3C CSS Color Module that always resolves to the computed value of the same element's color property. You can use it as a value for any property that accepts a <color>, including border, background, outline, box-shadow, text-decoration-color, and SVG fill and stroke.

Which browsers does currentColor support?

Every major browser supports currentColor: every Chromium-based browser, Firefox, Safari on macOS and iOS, and Internet Explorer 9 and later, with global support near 97%.

Where can you use currentColor in CSS?

currentColor is valid anywhere a CSS <color> type is accepted. That covers most surface-level paint properties on HTML elements and the fill and stroke attributes on SVG.

• Borders and outlines: Setting border-color: currentColor or outline-color: currentColor makes the border match the text color, so a single color rule restyles both at once.
• Backgrounds: background-color: currentColor lets a tag like a badge or pill paint its fill from the parent's text color, which is handy for theme-aware components.
• Box shadows and text shadows: box-shadow and text-shadow accept currentColor, so the glow follows whatever color the element inherits.
• Gradient stops: linear-gradient, radial-gradient, and conic-gradient stops can use currentColor on Chromium browsers, Firefox, and Safari, which is useful for fade-out masks tied to text color.
• SVG fill and stroke: Inline SVG icons can use fill="currentColor" or stroke="currentColor" so the icon picks up the link or button color without extra CSS.
• caret-color and text-decoration-color: Both properties accept currentColor, which keeps the cursor and underline visually tied to the text.
• accent-color: Chrome and Firefox honor accent-color: currentColor on form controls. Safari does not, so plan for a literal-color fallback.
• CSS custom properties: You can store currentColor in a custom property like --icon-color: currentColor and reference the variable in nested elements to keep theme rules in one place.

How do you use currentColor with SVG?

Inline SVG inside an HTML page can set fill="currentColor" or stroke="currentColor" on any shape. The SVG element reads the parent HTML element's color property and paints itself with that value, which is why icon libraries lean on the keyword for theme-aware icons.

Paste this snippet into an HTML page and hover the link in DevTools. The icon recolors automatically because both the fill and the stroke point at currentColor.

<!-- Inline SVG inside an anchor inherits the link's color value. -->
<!-- Hover the link in DevTools and watch the icon recolor. -->
<a href="/inbox" style="color: dodgerblue">
  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
    <path fill="currentColor" d="M2 4h12v8H2z" />
    <path stroke="currentColor" stroke-width="1.5" fill="none" d="M2 4l6 5 6-5" />
  </svg>
  Inbox
</a>

<style>
  a:hover { color: tomato; } /* fill and stroke follow */
  a:focus { color: rebeccapurple; } /* same here */
</style>

The keyword only inherits across the SVG's own document, so an SVG loaded through an <img> tag, a CSS background-image, or an <object> cannot read the host page's color. Inline the SVG, or reference a <symbol> through a <use> tag in the same document, to make fill="currentColor" pick up the parent color.

What are the known issues with currentColor?

currentColor is rock-solid on modern browsers, but a handful of legacy quirks and surprising inheritance rules still trip up real codebases.

• IE 10 and IE 11 gradient bug: Both browsers resolve currentColor to black inside linear-gradient and radial-gradient stops. Use a CSS custom property fallback or a literal color when you support IE.
• Pre-Chromium Edge gradient bug: EdgeHTML 12 to 18 share the same gradient bug as IE 11. Chromium-based Edge from Edge 79 fixed it.
• External SVGs do not inherit: SVGs loaded through <img>, background-image, or <object> cannot read the parent page's color. fill="currentColor" silently falls back to black or to the SVG's own default.
• User-agent button styles override: Native <button> and <input type="submit"> elements ignore currentColor on border-color until you also set color: inherit, because the browser's stylesheet wins.
• accent-color: currentColor on Safari: Safari ignores accent-color: currentColor on form controls and falls back to the user-agent blue, so checkbox and radio styling drifts on iOS and macOS.
• Self-reference on color: Setting color: currentColor on the same element triggers the inherited color from the parent, not the element's own. It is a no-op on the root element because there is nothing to inherit from.
• Animation through currentColor: Animating color animates currentColor for free on every dependent property, but the dependent properties cannot be animated past their currentColor value through @keyframes alone.

In my experience, the trap that bites every icon-library integration once is the external-SVG case. A team inlines a single <img src="icon.svg"> with fill="currentColor" baked in, sees a black icon in production, and chases the bug for an hour. Switch the tag to inline SVG or to a <symbol> with <use> and the color inherits as expected.

Citations

All currentColor version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - CSS color value: developer.mozilla.org/en-US/docs/Web/CSS/color_value
• MDN Web Docs - color property: developer.mozilla.org/en-US/docs/Web/CSS/color
• MDN Web Docs - SVG fill attribute: developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill
• W3C CSS Color Module Level 3 - currentColor: w3.org/TR/css-color-3/#currentcolor
• W3C CSS Color Module Level 4: w3.org/TR/css-color-4
• CSS-Tricks - currentcolor: css-tricks.com/currentcolor
• Frontend Masters - Using currentColor: frontendmasters.com/blog/using-currentcolor
• Mozilla Hacks - SVG and currentColor: hacks.mozilla.org/2014/10/svg-foreignobject-and-styling
• WebKit blog - CSS Color updates: webkit.org/blog/12080/new-webkit-features-in-safari-15-4
• Wikipedia - CSS Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets