CSS color value currentColor

CSS property color can have a special value currentColor. Its computed value is same as the computer value of color property. One possible use case if to specify fill color value in SVG based on current color.

Examples – color currentColor

In the following code, CSS property color can be changed to the following values
  • red
  • green
  • orange
div {color:red;}
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <rect width="100" height="100" style="fill:currentColor" />
    <text x="30" y="60" style="font-size:36px;fill:white;">
color refresh


Specification and Browser compatibility

CSS currentColor valueW3C RecommendationCSS
Yes 4+ Yes 2+ Yes 9+ Yes 12+ Yes 4+ Yes 10.0-10.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 4.0-4.1+ Yes 10+ Yes 10+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments