With most design elements we can change the ‘Background style’ e.g. None, flat color, gradient
But on a text element, it would be cool to have the ability to set a gradient on the font colour, like the example below - without relying on some CSS e.g. webkit rule.
Cheers
Has anyone figured out how to do this?
Hey @Nocodify
Its not possible to natively do this, but a workaround would be to expose the ID’s of elements and then use some custom CSS on the page level.
In the general tab the ID is set to be exposed
Applied a unique ID to the text element
On the page level, I’ve added some custom CSS. This could also be at app level or within a HTML element
#gradient-text {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Result
Hi @luke2,
Thanks so much for this. For some reason, it’s still not working for me.
Are there any other steps involved?
If easier, I can share with you my editor, let me know, and thanks 
Your welcome.
Sure happy to take a look at the Bubble editor if easier.
But just to check, is this on a paid plan? I can’t remember, but I think you have to be on a paid plan in order to use the ‘Page HTML Header’ to render custom values.
A quick way to check is just to remove the CSS from there and create a new ‘HTML’ element on the page and then paste this CSS into there and see if the gradient renders…let me know.
Thank you!! The HTML element worked, so I guess it was something with not being on a paid plan for the page html value.
Hi @luke2,
This works perfectly for desktop, but some reason does not render on mobile. Would you happen to know why?
Hey @Nocodify
Just checked and your right. I think its related to the way Bubble is rendering elements in the source code.
This should work. Edit your CSS to include the children ‘div’ tags like so onto the ID:
<style>
#gradient-text div div {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
Ideally the method of using the gradient is applied to a CSS class, but Bubble doesn’t expose these without using a plugin.
Let me know if it all works.
So strange, but your solution worked great! Thank you again
Update: It now doesn’t work anymore on mobile 
@Bubble, was something new introduced?
I saw a post the other day from one of the engineers describing an update that reduced the number of diva being drawn on the page. Looking at the css, is it possible it’s now targeting a div that doesn’t exist anymore?
Yes, I do remember that thread.
@cal, this turned out to possibly remove the CSS feature from text elements. I had many in my application that suddenly disappeared without my knowing.
Do you mind providing an update on this?
Hey @Nocodify
Yes seems the rendering of the markup has changed a bit.
Try either just the parent div tag:
#gradient-text div {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
or use the class .content as instead:
#gradient-text .content {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Both tested and are working (as of today 
)
For some reason, those changes are still not working for me.
@Bubble, @neerja, @cal, this update that was rolled out on divs broke my app… all my major text headers were using CSS gradients.
Can I please get an update on this?
@Bubble @cal @eve @neerja @ANYONE who’s on the Bubble team…
I’ve emailed, written in this forum, and yet no answer from anyone on the Bubble team.
This is pretty frustrating. I’ve always backed Bubble but the support is so extremely lacking.
It’s a pretty simple question I have that doesn’t take much looking into. Why can’t anyone from the Bubble team respond? This is the kind of thing people get worried about from the support perspective of Bubble.
Hello,
We have just received an email at support@bubble.io from you regarding this issue for the first time about ten minutes ago; this email is now in our queue, and will be addressed as soon as possible. Please do keep in mind that emailing us is the best way to ensure that your ticket is addressed: while we do keep an eye on the forum, it is very difficult to track tickets through this medium.
I sent an email on Sept 3 as well, I sent the exact same one again today.
While I do understand that tracking tickets may be hard in the forum, I don’t think it’s hard to miss a notification - I tagged 4+ forum accounts many times over.
I just wanted a simple update and response from @cal, who announced the breaking change on div tags. Sorry, I’m a little frustrated right now, so I apologize, but it’s really hard to believe he would miss 3 separate notifications/tags about this issue. Thanks for addressing my concerns Eve and I’ll wait patiently for the response on the email.
Is it possible to change the background color of the text only?
Hey guys, have you found an easier way ?
Help a brother out, and happy new year !
This worked for me
#gradient-text { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent;and then add gradient-text in the ID attribute of the text