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. 

  • 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

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

    Join Convology Pro

    Get access to all Convology Courses, Workshops, and exclusive community with our all-access-pass called Convology Pro.

    >