Creating a text with CSS gradient text effect in Elementor

Updated on August 27, 2019

How to add gradient to a text in Elementor?

As you may have known before, a gradient is a transition of colors which starts from a color and ends with another. This visual effect already exists in CSS which can used to have a more stylish web page.

Hopefully you can use this feature in Elementor without writing a line of code and create a text with gradient effect like this:

Beware! The CSS gradient effect is one of the features of a Heading element. Heading element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. 


In order to add CSS gradient effect to your text in Elementor:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard,  drag and drop a Raven Heading widget into your layout so that a new panel will open on the left side of the Elementor with the element’s specific settings.

4. From the Style tab > Heading section , choose Gradient for the Color Type option.

5. Set the first color and also the second one for it.

6. You can also decide for the gradient type to be Linear or Gradient as well as customizing their options.

7. Update the settings.

Did this answer your question?