currentColor: The (Not So) Secret Ingredient

There are a number of CSS properties that produce colour. Most of them have an interesting initial value, currentColor.

border-color, box-shadow, text-shadow, text-decoration, and outline all have initial values of currentColor.

See the Pen currentColor example. by Dave Cross (@davecross) on CodePen.

That means we don't actually have to set a border colour if we want it to match the text color. Just set border width and style to get the desired effect.

See the Pen Border color defaults by Dave Cross (@davecross) on CodePen.

The secret is that currentColor can be used anywhere a colour is accepted. So, while kind of silly, you could set background-color: currentColor; and your text would be invisible.

See the Pen Hiding text with currentColor by Dave Cross (@davecross) on CodePen.

For SVG, we can use currentColor for fill and stroke when we want icons to match surrounding text. Knowing about currentColor opens up a lot of possibilities when using SVG icons.

See the Pen Inverting Buttons by Dave Cross (@davecross) on CodePen.