How to modify the fill color of an SVG image when being served as background image with CSS?

Spread the love

Sometimes, we want to modify the fill color of an SVG image when being served as background image with CSS.

In this article, we’ll look at how to modify the fill color of an SVG image when being served as background image with CSS.

How to modify the fill color of an SVG image when being served as background image with CSS?

To modify the fill color of an SVG image when being served as background image with CSS, we can use masks.

For instance, we write

.icon {
  background-color: red;
  -webkit-mask-image: url(icon.svg);
  mask-image: url(icon.svg);
}

to set the mask-image property to the mask image’s URL.

The mask will be applied over the image.

Conclusion

To modify the fill color of an SVG image when being served as background image with CSS, we can use masks.

Leave a Reply

Your email address will not be published.