Creating knockout text in Webflow

Learn how to create knockout text to make your next site a real knockout.

Micah Ryan
October 25, 2018
Tutorials

Knockout text — text that looks like it’s been cut out of a surface to reveal the background — is a beautiful design effect for your website. And with just a little custom code, Webflow makes knockout text quick and easy.

The most straightforward way to create knockout text is with the background-clip property. In this article, we’ll show you how to use CSS background-clip in Webflow.

But first, we’ll take a quick look at why you should use real HTML text and the background-clip property instead of a custom graphic — as well as some of the reasons you might not be able to use this effect on production projects.

How I used to create knockout text: in Photoshop

Before I discovered the process of using Webflow to make knockout text, I used to make it by hand in Photoshop. I’d mask text over a background image and export the graphic to slap into my website. It only took a few minutes, and the results were beautiful.

But it wasn’t a web-friendly result, for several reasons:

  1. If I ever decided to update the text itself, I’d have to create an entirely new graphic in Photoshop.
  2. Because it’s a static image, the text itself can’t be indexed by Google — a big SEO problem, particularly for the homepage headlines I often created this way — nor can it be copied/pasted.
  3. The images files tend to be quite large, especially at higher resolutions, bogging down the site’s loading speed on slower connections.  

Luckily, there’s a better option for creating the knockout text effect directly on the web with -webkit-background-clip and -webkit-text-fill-color.

How I create knockout text now: -webkit-background-clip and -webkit-text-fill-color

To create a web-friendly and easy-to-update version of this effect, we’ll use two CSS properties:

  1. -webkit-background-clip, which specifies whether an element’s background image extends past its border
  2. -webkit-text-fill-color, which specifies the fill color of text. If this property is not set, it will use the value of the color property.

The -webkit-text-fill-color property, unfortunately, is non-standard, so it won’t work for everyone. Used together, the -webkit-background-clip and -webkit-text-fill-color work in browsers using the webkit engine, like Chrome, Firefox, and Safari. Also, adding flexbox to the text itself prevents the styling from being implemented due to a known bug.

So be sure to use -webkit-text-fill-color for fun personal projects, not for large-scale web projects where providing the same experience to all browsers matters.

Despite the lack of cross-browser compatibility, this method was one huge benefit: It’s real HTML text, so it achieves the trifecta of web design amazingness:

  1. Searchability
  2. Accessibility
  3. Ease of editing

Creating knockout text: the web-friendly way

With all that out of the way, let’s do this. It’s a pretty simple tutorial, but if you’d like, you can also clone my knockout text project for more details on how it’s built.

1. First, place the text you want to use on the canvas. I used flexbox to center the text vertically and horizontally in a full-screen container, but you can position it however you’d like.

Any positioning method will do here. We just thought this effect begged to be front and center.

2. Next, add a class name to the text. Anything will do, but I’ve named this one c-section__heading, because I’m a big fan of BEM.

Next, give your heading a class name.

3. Now, add your background image to the heading element, and make sure the line height extends below the text, so no parts of the letterforms show the text color.

Go big or go home, right? (Seriously though: the bigger, bolder, and more condensed the type is, the more the image background will show through.)
Make sure you've got sufficient line height to cover any descenders (like the tail of the G).
Set your background image to cover, and center position it.

4. Next, open the page's custom code tab, or add an Embed element directly on the page. The second option allows you to see the custom code work within the Designer (pretty cool!).

You'll find the custom code section in the page settings panel, or you can use an embed on the page to see the effect in the Designer.


5. Enter the following custom code, replacing .c-section_heading with your heading’s class name:


5. Enter the following custom code, replacing .c-section_heading with your heading’s class name:

<style>
                .c-section__heading {
               -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
         }
        </style>


Copy the code above and paste it into the custom code panel ...
Or add it to an embed element to see the effect without leaving the Designer!

6. Finally, publish your project to see your text clip with the added background in your live project!

Then hit publish to view it live on the web!

Just share it

Knockout text is an epic effect to add to your site and, luckily, easy to build in Webflow.

Now, clone this project. Customize it, and share it with us when you’re done. Take this little tutorial site and make it amazingly yours!

Micah Ryan

Dirtbikes, unicycles, and all kinds of daredevil acts were my Texas childhood. Now, I’m a UI/web designer based in St. Louis, MO.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.