How to Apply Gradient on Text in Elementor?

Applying a gradient to text in Elementor can give your website a modern and dynamic look. Unfortunately, Elementor does not currently offer a direct feature to apply gradients to text. However, by using custom CSS, you can achieve this effect easily. Here’s a step-by-step guide on how to do it.

Gradient Text in Elementor

Step 1: Add Your Text Widget

To begin, you’ll need to add a text widget (such as a heading or text editor) to your page:

1. Open your Elementor editor.
2. Drag and drop a Heading widget (or Text Editor) onto your desired section.
3. Type in the text you want to apply a gradient to.

Step 2: Add Custom CSS (For Elementor Pro Users)

If you have Elementor Pro, you can use the Custom CSS feature to apply the gradient directly within Elementor. Here’s how:

1. Select the text widget you want to edit.
2. Go to the Advanced tab and scroll down to find the Custom CSS section.
3. Enter the following CSS code:

You can also generate the CSS Gradient text code here: CSS Text Gradient Generator.

:root{
    --color1: #1C99FE;
    --color2: #7644FF;
    --color3: #fd4766;
    --angle: 120deg;
}

selector h2{
    background: linear-gradient(var(--angle), var(--color1) 20.69%, var(--color2) 50.19%, var(--color3) 79.69%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
}

This CSS code applies a linear gradient from left to right with a mix of orange and red colors. You can adjust the gradient colors as needed by changing the HEX codes.

More Read

How to Get Source Code of WordPress Website?

How to Migrate Your WordPress Site to Another Host Using WP Staging Plugin

How to Apply Animated text in Elementor Pro Free!

Step 3: Customize the Gradient

You can further customize the gradient effect to suit your design:

• Adjust the angle: Change the angle of the gradient by modifying the value 90deg. For example, use 45deg for a diagonal gradient or 180deg for a top-to-bottom gradient.
• Color stops: You can add more colors to your gradient by adding more color stops. For instance, if you want a three-color gradient, your code might look like this:

Step 4: Review and Publish

Once you’ve applied the custom CSS, preview the changes on your page to ensure that the gradient effect looks as intended. If you’re happy with the result, go ahead and publish or update your page.

Bonus: Applying Gradients Without Elementor Pro

If you don’t have Elementor Pro, you can still apply a gradient to your text using custom CSS within your theme’s CSS editor or a custom CSS plugin:

1. Go to your WordPress Dashboard.
2. Navigate to Appearance > Customize > Additional CSS.
3. Paste the same CSS code (you may need to target the text widget by its unique CSS class or ID).
4. Apply the changes and check your Elementor page for the effect.

Conclusion

While Elementor doesn’t offer a built-in gradient text feature, applying gradients with custom CSS is a great workaround. It adds a visually appealing effect to your site that can make your text stand out. Experiment with different gradient angles and color combinations to find the perfect fit for your design.