Create collage effects in the browser with CSS

If you've ever wished you could replicate the effects of a traditional collage maker in your website layouts, this is the tutorial for you.

The web design tutorial will look at three CSS properties: mask-image, clip-path and shape-outside. Even if you have used them, don’t worry. I’ll show examples that will help you create effects you probably haven’t seen on many websites. 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Aga is a designer and frontend coder at Adobe. She’s the co-founder of The Awwwesomes – a non-profit organisation that teaches people to do awwwesome things on the web, and organises coding workshops in Poland.
Latest in Web Browsers & Extensions
Arc web browser
This radical internet browser lets you remix any website
The Internet Explorer logo on a gravestone
Farewell, Internet Explorer
The Apple Safari logo on a gradient background.
This essential extension fixes Safari 15's biggest design flaw
Future of web browser
What's next for the web browser?
History of the web browser
The history of the web browser
CSS art
CSS art gets brilliantly ruined by old browsers
Latest in How to
Gesture drawing: all you need to know plus ways to practise in 2 and 5 minutes
How to draw a male figure
drawing of a naked woman with someone drawing it
How to draw a female figure
GIMP in pro work
Making GIMP 3.0 work for pro results: is it possible?
Pejman Rajabi 3D tutorial of Super Mario fan art
“One of the best creative experiences of my life, working with such an amazing artistic crew” – how VFX artist Pejman Rajabi and friends created a heartfelt tribute to Super Mario
Marco Teixeira 3D tutorial
“The challenge was to create a cool character design”: concept artist Marco Teixeira reveals the techniques and inspiration behind his superb 3D character render