Creating a Cut Out Text Effect

29^th August, 2018

Before we start, there’s a couple of small caveats to this incredibly visually pleasing (and simple) CSS trick, but don’t let that put you off!

First of all, there’s only two colours that this trick correctly works with – white on black, and black on white. The second of these caveats is browser support, it’s not available on all browsers, but it’s natural fallback is actually a perfectly suitable mid-ground. The blend mode stops working and you’re left with either black text on a white background, or white text on a black background, still completely legible and not out of the ordinary to see on the web. Check here to see where it will and won’t work – https://caniuse.com/#feat=css-mixblendmode.

Now, on to the trick itself…

This trick relies on mix-blend-mode. Simply put, the mix-blend-mode style describes how an element’s content should blend with the content of the element’s direct parent and the element’s background. There’s many different mix-blend-mode options, but the two we are using today will be ‘multiply’ and ‘screen’.

As I’m sure you’ll already know the majority of the CSS used to create this set up I won’t bloat out the examples with unnecessary code, but there’s a CodePen you can view which holds all of the CSS used https://codepen.io/TidyDesign.

We will start with black text on a white background. So create a h1 element and let’s give this a background colour of white, and a colour of black.

h1.cutout {
  background: white;
  color: black;
}

With this set up we can add the magic…

h1.cutout {
  background: white;
  color: black;
  mix-blend-mode: screen; // The magic
}

How simple is that, 3 lines of code and we’ve got a great cut out text effect!

Now, if you want to switch the colours to be white on black all we have to do is change these three styles. Swap over the colour and background values and change ‘mix-blend-mode: screen;’ to ‘mix-blend-mode: multiply;’.

That’s all, who doesn’t like effects this striking which are so easy to create! CSS is full of little secrets like this, try playing around with the colours and blend modes in the Pen to see what other things you can create…

https://codepen.io/TidyDesign/pen/aamweL/

Thank you for reading

Luke