New course, Command Line for Creatives, out now!

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

0:00/11:06

June 13th 2018

Playback speed

1.25× 1.5× 1.75×

Skip

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