Have you ever visited a website, or seen some cool piece of graphic design with text that’s been clipped out to show another image/graphic in the background?
That’s typically referred to as knock-out text. It’s a very visually impactful styling that can add a real dramatic effect to your website. Many times, a designer will come up with this layering effect in Photoshop or some other design software and provide the final asset as a static flat image for wherever it’s being used.
But what about the web? What if you had a headline that was a key message in your website(e.g. h1 tag), but it was included as part of this flat image? This would create issues with accessibility on your website. A screen reader will have no way of reading that knock-out text if it’s been created as part of a flattened image.
Thankfully, CSS now lets us create this knock-out effects on actual HTML elements (e.g. <h1>, <h2>, etc…). Meaning, you can add a dramatic visual effect to elements of text that will be accessible on the web.
The magic is simply in the “mix-blend-mode” property within CSS!
Here’s a basic example to see how it works.
Let’s say you had an h1 tag in the header of your HTML, and you wanted to give it a cool knock-out text effect. Add your h1, like you normally would, but we’ll also put it in a “header-box” div (so we can move it around if we need to); plus, we’ll wrap those up in another div and give it a class of “backdrop”.
We will then use the “.backdrop” div (in our CSS) to contain what we want to see behind our text. In this example, we’re using an image (photo), but you can use any graphic — perhaps a coloured or textured graphic…whatever you feel like.
Going back to our h1, we will now give it a couple of class attributes.
In our styling, we can then get working with the magic of mix-blend-modes! As you can see, we apply the mix-blend-mode property with a value of “multiply”, which matches the class attributes on our h1. Overall, there are four blend modes that can make text cutouts:
lighten. Applying these to the top element of a stack of image and text (have your text on top) creates the knockout design. In our example, we use white for our text colour and set the foreground to a darker layer. From there, the ‘multiply’ value blends these values resulting in the knocked out text effect.
Depending on your background/foreground colour combinations, you can experiment with the other mix-blend-mode values to get the desired effect.
In our example, we used a sheep image in the background and applied the text layer knockout effect on top of it, which results in this…
This should give you enough info to get started and experimenting with the effect. Again, this is very important to keep in mind for accessibility if you’re planning to apply dramatic text effects on major pieces of text content.
For more info on CSS knockout, check out this handy article from CSS Tricks.