The Create Something LMS is brought to you with ♥

Creating knockout text in Webflow

October 24, 2018


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-colorwork 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!

Loading...
Subscribe now to get our latest news!
Stay In Touch With Us!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.