Knockout Text in Webflow

October 25, 2018

The most straightforward way to knockout text is with the background-clip property. In this article, you’ll learn how CSS  background-clip works, and why to avoid a graphic substitute.


Just Grab a Graphic


Many have seen the graphics where the background image is clipped within the text. They are awesome! Without a doubt, they are really cool. However, they aren’t the most web friendly.


Before, I would use a text clipping mask to create this effect in Photoshop . Then, I would add that graphic to my website. Adding alt text to the image for accessibility. But, the only way to update the text was to create a new graphic.


The text couldn't be copy/pasted. Images could be large in file size, especially at higher resolutions. Though there were drawbacks, the image worked everywhere on all browsers.


Now, we don’t need graphics. You can now do this on the web with  -webkit-background-clip and -webkit-text-fill-color.



Just -webkit-background-clip and -webkit-text-fill-color


Both properties are what make this effect work.


The -webkit-background-clip property specifies if an element’s background image extends past its border.


The -webkit-text-fill-color property specifies the fill color of characters of text. If this property is not set, it will use the value of the color property.


But, the -webkit-text-fill-color property is a non-standard property. Beware: it will not work for every user. In other words, use -webkit-text-fill-color for fun personal projects. Not for large scale web projects where there is value in longevity and accessibility.


Used together, the -webkit-background-clip and -webkit-text-fill-color work in Chrome, Firefox, and Safari. This effect won’t work without using the -webkit- web browser engine.


Though it is a non-standardized property, -webkit-text-fill-color was invented to complete this effect. The beauty is the pairing "hides" the text in browsers that can do the clipping.


This is real web text, so with that comes all the accessibility and easy-to-change-ness.



The most straightforward way to knockout text is with the background-clip property.

Just Do It

Now, let’s just do this:

1. Place text on canvas that you would like to use as the clipped text

2. Add a class name to the text


3. Place a background image on the text, and then make sure that the line height extends below the text

4. Access the page's custom code tab

5. Enter the following custom code using the class name of your text:

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

6. Then, publish your project to see your text clip the added background

Just Share It

Pretty easy, but nonetheless epic.

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!

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.