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:

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.
Add a class to your text
  • Go to Advanced > Custom CSS.
  • Add .text-gradient to CSS Classes.
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.

Web Design Services by Webtree

Located in Canberra and serving clients across Australia, Webtree specialises in crafting custom web solutions tailored to your business needs. Explore our range of web design services to enhance your online presence and accelerate your business growth.

Get a no-obligation free quote