How to Create Knockout Text or Text Mask in Thrive Architect

Creating standout text can really make enhance a page design. What if your text was not only standout, but KNOCKOUT as well? In this tutorial you're going to learn how to create text with a background image, gradient, and pattern using Thrive Architect (and a tiny little easy-to-use snippet of CSS). 

This type of design is often called "knockout text" because the text appears to be knocked out and you can see through it to the image below. I've also seen it referred to as "text mask" or "text clip mask" as well.

If you want to skip right to the video tutorials, I have two of them for you below.

Step 1: Choose a Font to Knockout

For this to look best, I recommend a big, wide font. Impact is a common font to use for knockout text, but any font classified as "black" or "extra bold" or anything large enough to actually see what's inside will do just fine.

Step 2: Add a Background Style to the Text Element

This will look weird at first, but all you have to do is select the text itself, choose "Background Style" from the menu, then add an image (or gradient / pattern). 

Step 3: Add  a Class to the Text

With your text still selected, find "HTML Attributes" at the bottom of the element menu. Now in the field for "Class" you want to give this a variable. I like to use "knockouttext" (without the quotes).

Step 3: Add this CSS to the Page

Copy the CSS below and place it inside your page by going to the Settings gear on the right menu. Go to advanced settings. Find Custom CSS and paste this in then press the checkmark.

.knockouttext {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

Your text should now be knockout text!

If you have any questions about creating knockout text using Thrive Architect, I'd be glad to help. 

  • Amazing. Great lesson. Will be using this very soon!

  • Super cool effect, Doug! I bet even the Thrive Themes guys don’t know about this one.

    • Doug says:

      Maybe! I love finding little tricks that take the tool to a new level.

  • Emilio says:

    Awesome work! thank you. Just subscribed to your YT channel. I did it directly in the theme builder CSS so I can apply in any page.
    Can this be done to an icon can you please help with the CSS?
    thanks

    • Doug says:

      I don’t think it works with icons from font libraries, or at least I don’t know how I would be able to get it to work with icons.

  • Tim says:

    Hey Doug,

    Do you know why this won’t show the text on iOS? Specifically iPad. I’ve been playing around with it and love the effect you get, but for some reason when you load up the site on an iPad it doesn’t show the text at all.

    Would love any help with this, even just a direction to head in to try and work it out myself.

    • Doug says:

      Not every CSS transition works in every browser. You may need to investigate CSS vendor prefixes (Google that and look at a few tutorials) which are basically ways of saying “make this work in Safari” or “Make this work in Firefox”.

      • Martino says:

        Hei Doug, same experience with Ios non showing the word where the knockout is applied. It’s not a matter of browser (doesn’t work either in Safari or Chrome) , but of mobile operating system…any suggestion? Thanks!

      • Martino says:

        One more: in my opinion the issue is with the “text-fill-color” instruction that seems non existent…

  • Andreas says:

    Hello Doug! I have a question, but first:
    Thank you sooo much for this great design upgrade! The knockouttext looks soo beautiful and is really outstanding!!

    Is there a way to do this “only with one word” of a headline?

    My headline consists of three words. (HAPPY YOUR LIFE) Is it possible to use the “gradient effect” for just one word (HAPPY) of the heading? The other two words stay in the thrive theme color?

    Can you please extend the CSS-Code? That would be super mega cool !!
    Thanks in advance!!!!

    Best regards from germany! And a like and a comment to your great YouTube Video!
    THANK you!
    Andreas

    • Doug says:

      You can use multiple text elements and apply the html attributes to just one of the text elements. Use float, relative, or absolute positioning to get your text in the place you want it.

  • Edson Moreira says:

    That´s perfect! Thanks for sharing.

  • >