Transparent text cut out of background

by

One way that works on most modern browsers is to use

background: black;
color: white;
mix-blend-mode: multiply;

for transparent text on a black background, or

background: white;
color: black;
mix-blend-mode: screen;

for transparent text on a white background.

enter image description here

For this to work in chrome, you also need to set any background colour on the html element.

Put these styles on your text element and then put whatever background you want behind that. Multiply basically maps the 0-255 color code to 0-1 and then multiplies that by whatever is behind it, so black stays black and white multiplies by 1 and effectively becomes transparent. Screen is effectively the opposite for this case.
http://codepen.io/nic_klaassen/full/adKqWX/

Leave a Comment

tech