--- title: "How to Add  Elementor Background Text Blend Mode?" url: https://theplusaddons.com/docs/add-elementor-background-text-blend-mode/ date: 2024-05-27 modified: 2026-09-13 lang: en author: "Aditya Sharma" description: "Want a headline that changes color with the image behind it? The Background Based Blend Mode of the Advanced Typography widget from The Plus Addons for Elementor blends the text..." image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Elementor-Text-Blend-Mode_-2-1024x536.jpg word_count: 291 --- # How to Add  Elementor Background Text Blend Mode? ## - Advanced Typography from The Plus Addons for Elementor Pro adds Background Based Blend Mode, which blends text with whatever sits behind it using CSS blend modes. - The setup requires a background image or color behind the text, then Content > Background Based Blend Mode is enabled and a variation such as Difference is selected. - Multiple mode gives each item in the Text Listing its own Background Based Blend Mode switch and Variations, while Normal does not blend. Want a headline that changes color with the image behind it? The **Background Based Blend Mode** of the Advanced Typography widget from The Plus Addons for Elementor blends the text with whatever sits behind it, using CSS blend modes. *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**.- A background image or color behind the text, for example on the container. ## Steps - Give the container that holds the widget a background image or color.- Add the Advanced Typography widget, keep **Select Option** on **Normal** and type your text.- Open **Content > Background Based Blend Mode** and turn on **Enable/Disable**.- Pick a blend mode in **Variations**, for example **Difference**. ![The Background Based Blend Mode section with Variations set to Difference, and the text blending with a purple background image on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-blend.webp) ![Switching on Background Based Blend Mode in the Advanced Typography widget](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-background-based-blend-mode-enable-1.gif) The text now blends with the background: ![Large text with the Difference blend mode over a purple background image, so the letters invert the colors behind them](https://theplusaddons.com/wp-content/uploads/2026/09/advtypo-result-blend.webp) ## How It Behaves - **Variations** sets the CSS blend mode of the text. The default, **Normal**, does not blend.- With the blend mode on, the widget makes the text white by default.- In **Multiple** mode, each item in the Text Listing has its own Background Based Blend Mode switch and Variations. ![Text blending with a colored background, made with the Background Based Blend Mode](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-background-based-blend-mode-demo-1.gif) ## Troubleshooting ### I don't see any blend Check that **Variations** is not left on **Normal**, and that there is a background image or color behind the text. On a plain white page there is nothing to blend with. ## Related Docs - [Advanced Typography widget: settings overview](https://theplusaddons.com/docs/advanced-typography/)- [Create a text mask effect](https://theplusaddons.com/docs/text-mask-effect-in-elementor/)- [Combine multiple styles on a text](https://theplusaddons.com/docs/multiple-styles-on-a-text-in-elementor/) ## Frequently Asked Questions **Q: What do I need before using background blend mode on text in Elementor?** A: The key requirement is the Advanced Typography widget from The Plus Addons for Elementor, and it needs the Pro edition. The page also says the widget must be switched on under The Plus Addons > Widgets, and there has to be a background image or color behind the text. Without something behind it, CSS blend modes have nothing to interact with, so the effect will not show. **Q: Why isn't my text blending with the background?** A: The two most common blockers are leaving Variations on Normal and not having a background image or color behind the text. On a plain white page, there is nothing for the blend mode to mix with. The page also notes that Normal does not blend, so picking a real blend mode like Difference is what actually creates the effect. **Q: How does background based blend mode behave in the Advanced Typography widget?** A: Variations controls the CSS blend mode for the text, and Normal is the default non-blending state. When blend mode is enabled, the widget makes the text white by default, which helps it stand out against whatever sits behind it. In Multiple mode, each item in Text Listing gets its own Background Based Blend Mode switch and Variations setting. **Q: What kind of background works best for this text effect?** A: A background image or a solid color behind the text is what this effect needs. The page specifically uses a container as an example, which makes sense because the text has to sit over something visible for CSS blend modes to change its appearance. A plain white page will not produce a visible result because there is nothing to blend against. **Q: Can I use different blend settings for each item in a text list?** A: Multiple mode supports that setup. The page says each item in Text Listing gets its own Background Based Blend Mode switch and Variations control, so you are not locked into one look for every line. That matters when you want one headline or list item to pop differently from another while staying inside the same Advanced Typography widget. **Q: What should I try if I want a stronger blend effect?** A: A stronger result usually comes from choosing a non-Normal option in Variations and testing it against a more visible background image or color. The page gives Difference as an example, which is useful because it creates an obvious contrast shift. If you want more control over text styling beyond blending, related docs like [Advanced Typography widget: settings overview](https://theplusaddons.com/docs/advanced-typography/) can help frame how this widget behaves alongside other text effects.