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.