There's a boat-load of articles showing different ways to do this but most are outdated and overly complicated. Here's the easiest most straightforward way; it doesn't require any javascript, it's supported by modern browsers, and gracefully degrades for other devices that don't support it by just showing the image.
Make a vector mask in Illustrator
- Create the shape you want
- Put the artboard tightly around it
- Ungroup everything (hit command+shift+g a few times)
- Save for the web as an SVG
![a simple vector shape in illustrator - in this example it's the Condensed icon](https://cdn.prod.website-files.com/644196566d4a9a50245e049c/644196566d4a9ac46a5e0674_condensed-logo_shape-mask.png)
The HTML and CSS
The HTML couldn't be more simple, you just put any old image into your document and add a class to it so you can target it.
For example here's an image of a nice place to visit:
<img src="https://i.postimg.cc/5Ns1NG6s/palm-tree-wallpapers-27997-4355712.jpg" class="mask" />
looks like this:
![](https://cdn.prod.website-files.com/644196566d4a9a50245e049c/644196566d4a9a61845e0775_palm-tree-wallpapers-27997-4355712.jpg)
CSS
This CSS below is all you need, you'll need to change the path to point to the SVG you saved earlier.
/*--- Masks ---*/
.mask {
mask: url(./images/mask_01.svg) no-repeat;
-webkit-mask: url(./images/mask_01.svg) no-repeat;
-o-mask: url(./images/mask_01.svg) no-repeat;
-ms-mask: url(./images/mask_01.svg) no-repeat;
}
Or if you are running auto-prefixer like we are in this codepen example below you can just add mask: and not worry about the browser prefixes: