---
title: "How to Create a Text Mask Effect in Elementor?"
url: https://theplusaddons.com/docs/text-mask-effect-in-elementor/
date: 2024-05-15
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Want a big headline with an image showing through the letters? The Knockout Text option of the Advanced Typography widget from The Plus Addons for Elementor fills the letters with..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-a-Text-Mask-in-Elementor_-1024x536.jpg
word_count: 264
---

# How to Create a Text Mask Effect in Elementor?

## 

- Creates a text mask effect using the Advanced Typography widget from The Plus Addons for Elementor.
- Enables the Knockout Text feature by toggling it in the Advanced Typography tab after adding text.
- Requires installation and activation of The Plus Addons for Elementor to access the Advanced Typography widget.

Want a big headline with an image showing through the letters?

The **Knockout Text** option of the Advanced Typography widget from The Plus Addons for Elementor fills the letters with an image or color, so the text works like a mask.

*To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, [click here](https://theplusaddons.com/docs/advanced-typography/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.- **Widget to enable:** Advanced Typography, switched on under **The Plus Addons > Widgets**.

## Steps

- Add the Advanced Typography widget, keep **Select Option** on **Normal** and type your text.- Open **Content > Knockout Text** and turn on **Enable/Disable**.- Under **Background Type** (classic), choose an **Image** or a **Color**.- Adjust **Position** and **Display Size** (for example Cover).- In **Style > Advanced Typography > Typography**, make the text large and bold so more of the image shows.

![The Knockout Text section with an image chosen, and large text filled with the image on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-knockout.webp)

![Switching on Knockout Text in the Advanced Typography widget](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-knockout-text-enable.gif)

The result on the page:

![The word WILDERNESS in large bold letters filled with a purple image](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-result-knockout.webp)

## How It Behaves

- The text itself becomes transparent and the background shows only inside the letters.- In **Multiple** mode, each item has its own Knockout Text switch and **Text Background**.

![Example of a text mask made with Knockout Text](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-knockout-text-demo.png)

## Troubleshooting

### The text disappeared

With Knockout Text on, the letters are transparent until you set a background. Choose an **Image** or **Color** in the Knockout Text section.

## Related Docs

- [Advanced Typography widget: settings overview](https://theplusaddons.com/docs/advanced-typography/)- [Blend text with the background](https://theplusaddons.com/docs/add-elementor-background-text-blend-mode/)- [Create an image reveal effect on text](https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/)