How to add complex image masking to website images with CSS clip-path and Figma

You may have seen image masks on sites like Abbotsford Convent or Creative Lives in Progress – of course you can prepare images manually but why not make it easy and flexible by letting CSS do the work! In this tutorial, Rik will show you how to add both simple and complex image masking by taking a Figma prepared SVG and implementing with CSS clip-path.

00:00 Intro
00:33 Basic mask shapes
03:26 Kylie alert
03:32 Complex mask shapes
15:30 Outro

Links:

Demo:

Download:

Photos by Agustín Farías on Death to Stock:

[hellothere]

Your content of building websites effects from scratch is what brings me back! Great teacher and lessons. Thanks!

[pablocortes]

This was awesome, thank you so much @SuperHi I never really understood the objectBoundingBox but now it all makes sense.

[GracielaFaz-so]

I'm currently looking to do this exact same thing but I also found the you can do a similar thing with mask-image, what are the differences between this two?

[bruhmoment]

Thank you so so so so so so so so so so so so so so so much!

[asifreza]

Thank you so so so so so so so so so so so so so so so much!!!!

[two-k]

Tutorials that never disappoint! What if I was building in Webflow and using a CMS collection and want to randomise the clipping paths on all the collection items?

[growwithdesign]

im trying to put a shine effect on top of it when we hove on the image. doesn't work. Any thoughts?

[jv-wdpo]

hey so i have an issue when there is a border-radius applied on the shapes. They appear huge on the site. Do you know any fix for this?

[riteshkc]

thanks been scratching my head for hours to implement a design 🥴🥴

[andrewshannon]

Great tutorial! What's the reason you changed the ratio of the squiggle to 1:1 and reduced it's size to 1px x 1px in Figma?

[jmg]

I wish you would’ve shown if it was responsive...