Quick tip: SVG & CSS Masks

David Bushell — Fri, 19 Jan 2024 12:22:17 +0000

Did you know you can embed SVG inline of CSS using a custom property?

:root {
  --arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8"/></svg>');
}

The SVG can be reused and recoloured to match the current colour:

button::after {
  background: currentColor;
  mask: var(--arrow) center center / 100% auto no-repeat;
  content: "";
  display: block;
  height: 1rem;
  width: 1rem;
}

The key to this technique is using mask instead of background-image. This allows you to change colours and even transition!

See my CodePen demo for an interactive example and my original blog post for further details of this technique.

Happy coding!

DEV Community: David Bushell

Quick tip: SVG & CSS Masks