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