Elementor lets you set a gradient background, but not a gradient on the text itself. The standard Heading widget only takes a solid color, so a multi-color title normally means writing your own CSS with background-clip: text. That’s the gap the Gradient Headline widget in Master Addons for Elementor fills.
With this widget you pick two colors, choose a linear or radial gradient, and the text fills with that gradient, no code. You also get an optional text shadow and 13 blend modes that control how the gradient mixes with whatever sits behind it. This guide covers every setting, using the widget that ships free with Master Addons.
Here’s the kind of gradient text you’ll build, a heading that fades from one color to another over a background image:
Before You Start #
- Elementor installed and active
- Master Addons for Elementor installed and active (installation guide)
- A page or template open in the Elementor editor
Step 1: Add the Gradient Headline Widget #
In the Elementor editor, search the widget panel for Gradient Headline and drag it onto your page. Master Addons widgets carry the “MA” badge, so they’re easy to spot. The editor opens the Edit Gradient Headline panel with three tabs: Content, Style, and Advanced.
Step 2: Set the Heading Content #
On the Content tab, type your title into the Heading field. The rest of the fields here are the basics:
- Heading URL turns the whole heading into a link.
- Alignment sets it left, center, or right.
- Title HTML Tag picks the tag, H1 through H6. Use H1 for a page’s main title and H2 for section titles so the page keeps a clean structure.
Step 3: Pick the Gradient Colors #
Switch to the Style tab and open Gradient Style. The gradient runs between two colors:
- Color is the first color, with a Location slider (a percentage) that sets where it sits along the text.
- Second Color is the end color, with its own Location slider.
Set the two colors to your brand palette, then nudge the Location sliders to decide how much of the text each color covers. The preview updates as you drag. There’s a separate Normal and Hover tab too, so the gradient can shift when someone hovers the heading.
Step 4: Choose the Gradient Type, Linear or Radial #
The Type dropdown sets the gradient shape. Each option swaps the extra control that shows up below it:
- Radial spreads the colors out from a center point. Pick a Position (like Center Center) to set where that point sits.
- Linear runs the colors in a straight line. Set the Angle to control the direction: 180 points the gradient straight down, 90 sends it across.
Radial is good for a glow from the middle of the text. Linear is the one most people picture when they think “gradient text,” a clean fade from left to right or top to bottom.
Step 5: Add a Text Shadow (Optional) #
The Text Shadow control adds depth behind the letters. Click the pencil to set the shadow color, blur, and horizontal and vertical offset. A soft shadow helps gradient text stay readable when it sits over a busy background image.
Step 6: Try the 13 Blend Modes #
The Blend Mode dropdown decides how the gradient text mixes with whatever sits behind it, like a background image or color. There are 13 modes:
- Normal, Multiply, Screen, Overlay
- Darken, Lighten, Color Dodge, Saturation
- Color, Difference, Exclusion, Hue, Luminosity
Normal keeps the gradient as-is. The rest react to the background: Multiply darkens, Screen lightens, Difference can invert colors for a striking look. The fastest way to choose is to flip through them and watch the preview, since the result depends on the colors behind the text.
Tune the Typography for font and size while you’re here, then click Publish (or Update) to save the page.
Where Gradient Text Works Well #
- Hero headlines, where a gradient title stands out against a photo or dark section.
- Section titles that need a bit more personality than flat text.
- Landing pages matching the gradient to a brand’s color scheme.
- Over background images, where a blend mode ties the text into the scene.
Frequently Asked Questions #
Can you add gradient color to text in Elementor?
Not with the default Heading widget, which only takes a solid color. The Master Addons Gradient Headline widget adds it: pick two colors, choose linear or radial, and the text fills with the gradient, no custom CSS needed.
How do I make gradient text in Elementor without CSS?
Add the Master Addons Gradient Headline widget, type your heading, then open the Style tab and set the first Color and Second Color. Choose Linear or Radial under Type, and the gradient applies to the text automatically.
What is the difference between linear and radial gradient text?
A linear gradient runs the colors in a straight line, set by an angle. A radial gradient spreads them out from a center point you choose with the Position control. Linear suits left-to-right fades; radial suits a glow from the middle.
What do the blend modes do?
Blend modes control how the gradient text mixes with the background behind it. The 13 options range from Normal (no blending) to Multiply, Screen, Overlay, Difference, and more. The effect depends on the colors behind the text, so preview each one.
Do I need Elementor Pro for gradient text?
No. The Gradient Headline widget works with the free version of Elementor, so the gradient colors, types, text shadow, and blend modes all work without Elementor Pro.
