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 themask
-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:
Top comments (6)
I made Shaggy from Scooby Doo
😂
love ur work dude!
Thank you!
how to apply only to the masked t-shirt ? (ignore background)
Just remove the background from the figure-tag