Masking and coloring product images using CSS and SVG

If you have a product that's available in several colors, it can be cumbersome and expensive to take pictures of each variant.

Luckily, we can use CSS and SVG to mask a single image.

In this tutorial, we'll create a mask for the "product"-part of an image, so we can replace it's color. We'll also remove the background of the image, so we can add our own.

Initial steps

1.
Find a useable image. I searched for "white t-shirt" on pexels.com, and found this image:

2.
Then I removed the background using remove.bg (you get 1 free credit per month, so use it wisely!)

3.
I converted this image to webp, using an online converter.

4.
Then I opened the converted image in Vectornator, a great, free vector-editor and added a path using the Pen tool (for clarity, I added a layer behind the image with a solid background-color):

5.
Finally, I exported the mask to svg, and cleaned it up using SVGOMG.

Phew! A lot of steps, but the only time-consuming step is the "masking" in Vectornator. If you need to do this for a lot of products, consider hiring a specialist on Fiverr or similar.

Now for the fun part! First, we need some markup:

<figure>  <img src="image.webp" alt="Text" />  <div></div></figure>

For the figure-tag, we'll add a few CSS Custom Properties, to set the t-shirt-color in hsl():

figure {  --h: 168;  --s: 40%;  --l: 65%;}

We want to set the background to the contrast-color of the t-shirt-color. That equals rotating the hue (--h) 180 degrees.

To make it a bit more interesing, we create a gradient with subtracted saturation (20%) for the first color, and subtracted lightness (20%) for the second:

figure {--_bg: linear-gradient(15deg,  hsl(calc(var(--h) + 180),  calc(var(--s) - 20%),  var(--l)),   hsl(calc(var(--h) + 180),  var(--s),  calc(var(--l) - 20%)));  background: var(--_bg);}

Let's try it out, with different --h-values:

Cool - now, let's color the t-shirt using a mask.

Enabling the mask

div {  background-color: hsl(    var(--h),    var(--s),    var(--l)  );  inset: 0;  mask-image: url('mask.svg');  mask-position: center;  mask-repeat: no-repeat;  mask-size: 100%;  mix-blend-mode: multiply;  position: absolute;}

Note: For Chrome and Safari, you need to add -webkit-prefixes to all the mask-properties.

Cool! Play around in Dev Tools with the three colors variables: --h, --s and --l.

A note on the SVG-mask

To be honest, I'm not very good at masking and I've only used Vectornator a couple of times.

To make up for my masking-skills, I decided to make the mask a bit blurry, by adding a Gaussian blur to the svg:

<filter id="f1" x="0" y="0">  <feGaussianBlur    in="SourceGraphic"    stdDeviation="3" /></filter>

And then, in the path itself:

<path filter="url(#f1)" ...>

And that's it!

Here's a Codepen with added controls, so you can play around with the hsl-values: