CSS Tip: Inherit Background Color from Text Color
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.