Apply gradients to text elements as color (not background)

[jasonturo]

Hi everyone,

So far unsuccessful at the moment using the below css code in an HTML element in the page or adding into the page’s HTML header, along with the text field’s “ID attribute: gradient-text”

Anyone have a recommendation to try? Thanks.
Cheers

#gradient-text { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

[troy.roberge]

You forgot the style tags

[jasonturo]

Ah, yes. Of course. However, it still does not apply a gradient for some reason (tried different colors, too).

This is the text element (I wouldn’t think any element settings would interfere with the ID attributes from the HTML element):

[luke2]

Hey @jasonturo

Your right, the CSS code doesn’t render the gradient correctly. Looking into it, I’m guessing your pages or reusables are using the new responsive engine. In which case its a little different, as the HTML code that is generated is generally a lot cleaner and more compliant.

So to confirm it appears for old responsive pages:
#gradient-text .content {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

And for new responsive pages:
#gradient-text {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Still in both cases, you’ll need to expose the ID and then on the text element you want the gradient add in the ID gradient-textand remember to add the opening and closing style tags e.g. <style> and </style>

Example:

[jasonturo]

Ah ha, it worked! Yes, for the new engine the .content needs to be removed.

Would you know how to apply gradient horizontally across the text instead of vertical?

Cheers

[jasonturo]

Horizontal text gradient, in new engine:

#gradient-text { background: -webkit-linear-gradient(left, red , yellow); background: -o-linear-gradient(right, red, yellow); background: -moz-linear-gradient(right, red, yellow); background: linear-gradient(to right, red , yellow); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

[luke2]

Just beat me to it, but yes exactly, can you hex and other types too e.g.

#gradient-text {
background: -webkit-linear-gradient(left, #FF5733, #FFBD33);
background: -o-linear-gradient(right, #FF5733, #FFBD33);
background: -moz-linear-gradient(right, #FF5733, #FFBD33);
background: linear-gradient(to right, #FF5733, #FFBD33);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}