Studio Editor: Adding and Customizing Text Masks
Text masks are a great tool for short pieces of text intended to grab visitors' attention. You can set the text background (fill) to an image, a video or a gradient, so it's much more noticeable on the page. 
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.In this article, learn how to:
Add a text mask element Change the text on the element Design the text maskAdding a text mask elementHead over to the Add Elements panel to add a new text mask element. Choose a design you like and drag it onto the page - you can fully customize it later, from the Inspector panel. Best practice:We recommend adding up to 10 text masks per page, to ensure the best site performance on mobile.To add a text mask:
Click Add Elements  on the left side of the Editor. Click Text. Click Text Mask. Drag a text mask design you like onto the page.
Tip: Some of our designs include a video background. Hover over a design in the panel to see it in action.  Enter the text that should appear on this element:
    
Click the new text mask you just added. Click Change Text. Enter the text you want to appear.  Changing the text on a text maskEdit the text that appears on the text mask at any point. Using the Enter key on your keyboard, you can create the amount of rows you need for the text. To change the text on a text mask:
Select the text mask element in the Editor. Click Change Text. Enter the text under Add your own text.Tip:Control the capitalization of the text from the Inspector panel. For example, you can make the entire text uppercase or lowercase (see "Designing a text mask element" below). Designing a text mask elementFrom the Inspector panel, you can adjust the existing design of the text mask or create one from scratch, based on your needs. You can add an interesting media / gradient fill, change the spacing between letters and rows, and much more.To design a text mask:
Select the text mask element in the Editor. Click the Open Inspector arrow  at the top right of the Editor. Scroll down to Design. Choose how you want to design the text mask:Set an image or video fill
Select Media under Fill. Click the Change Media box next to the slider.
 (In the Media Manager) Select a new image or video. When ready, click Change Background. Drag the slider to adjust the fill opacity.  (Optional) Enable the Apply Color Overlay toggle to add a layer of color on top of the background. You can set the overlay opacity and choose how to blend it under Blend Mode.Heard about our AI Image Creator?This helpful tool in the Media Manager creates images for you, based on your instructions.Set a gradient background
Select Gradient under Fill. Click the Change Gradient box next to the slider.
 (In the Custom Color panel) Choose the type of gradient you want: 
    
Linear, Radial or Conic: 

Click the Gradient icon  at the top.  Choose the gradient type from the drop-down: Linear, Radial or Conic. Design the gradient by adjusting the colors, angle and focal point.    Fluid: 
        
Click the Fluid Gradient icon  at the top. Design the gradient by adjusting the colors and setting the size and spread of each color.    Format and align the textYou can find all of the formatting options under Text in the Inspector:
Font: Choose a different font from the drop-down. Styles: Make the text bold, italicized, underlined or add a strikethrough. Alignment & formatting: Align the text to the left, center, or right, and choose the text direction (e.g. left to right). Line height & character spacing: Change the spacing between lines  and characters . Heading tag: Choose the relevant tag for the text (e.g. H1, P) to improve the site's accessibility and SEO. Change the text capitalizationUnder Capitalization in the Inspector, you can decide when to use capital letters on the text:
Uppercase : The entire text appears in capital letters. Title case : The first letter of each word is a capital letter. Lowercase : The entire text appears in small letters. None : The capitalization goes by the text you enter in the Change Text panel.