🚨 Honk honk! Two new courses! Creative Coding and Math for Creatives

How to make a cut out design effect with CSS blend modes

On the Ways Of Knowing Cities site, there's a clever cut out style effect where the background shows through text. We talk how about to make your own similar effect, firstly using a normal design program, then by using CSS's screen blend mode.

View demo: cut-outs.superhi.com

Beginner Beginner


June 13th 2018

Playback speed

1.25× 1.5× 1.75×


−60s −30s −10s +10s +30s +60s