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.
The next example adds an animation and uses keyframes to make the gradient dynamic, moving back and forward across the letters.
Text Gradients
.text-gradient-moving {
color: blue !important;
}
@supports(--css: variables) {
.text-gradient-moving {
background: linear-gradient(to right, blue, pink);
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
width: 400px; // Needed otherwise the gradient is much wider than the text and not as apparent
background-size: 200% 200%;
animation: gradient-shift 2s linear infinite alternate; /* Back and forth so it doesn't glitch */
}
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}