CSS Tip: Inherit Background Color from Text Color

January 13, 2021

I’ve been using the SVG-mask-plus-background-color trick for a while to make sharp icons that can be colored to match nearby text. But I just learned today that they can inherit the text’s color automatically.

CSS has a keyword called currentColor that represents the current color. So background-color: currentColor fills the icon with the same color as the text, so long as the icon is a sibling or descendant of the text element.

Can I Use reports support across the board. News to me.