Applying a Text Gradient in Elementor

This method of adding a gradient to text in Elementor is a nifty way to make your site stand out.

This method has a graceful degradation for older sites that don’t support the background-clip property by targeting only browsers that support CSS variables.

Text Gradients

How to:

1
Add your heading
  • Add a Heading to your page in it's own container or section.
  • Right-click on the edit button of the heading and click Edit Heading to open the heading's settings panel.
  • On the style tab, set the colour of the text and adjust the opacity down to zero.
2
Add a class to your text
  • Go to Advanced > Custom CSS.
  • Add .text-gradient to CSS Classes.
3
Add the CSS
Now we're going to add the CSS to the container (or section).
  • Right-click on the edit button of the container (or section) and click Edit Container to open the container's settings panel.
  • Add the CSS Code below to Custom CSS panel in the Advanced tab - you may get some warnings which you can ignore
  • Update the blue and pink values to your desired colours
				
					  .text-gradient {
      color: blue !important;
  }
      
      @supports(--css: variables) {
  .text-gradient {
    background: linear-gradient(to right, blue, pink);
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
				
			

This method works by applying a gradient on the external container and then clipping the background to the text.

Background-clip isn’t supported in older browsers. Therefore we only apply this CSS to browsers that support CSS Variables (i.e. modern browsers). By only applying to browsers that support the background-clip CSS property, we ensure a good user experience in older browsers where the 0% opacity text wouldn’t be visible to the user at all.

Egg Gradients is a useful site to get some beautiful gradient examples.

Our Services

Are you a Business needing a website?

Are you an organisation needing web services?

Question?