Text Background Gradient in Bubble - FREE, no plugin needed

Adding a Gradient to Text in Bubble

Thank you to one of our YouTube subscribers for leaving the question, "How do I add a gradient to text?" Well, I'm going to show you, and it's super quick, but there's a few things we just have to cover. So let me show you. In the Bubble editor, you have the ability to add an ID attribute, and this is part of the HTML in the page, and it's one way that you can interact with the contents of the page using CSS. If you don't see ID attribute here, then you'll see it in settings general, and scroll all the way down to the bottom, and you need to have this box here clicked, and that allows you to give the elements on your page a unique label that appears in the code.

Using CSS for Text Gradients

And that's important because we're going to be applying the text gradient using CSS. And we can either do that on a page level by putting our style tag and our CSS into the section here. But if we want to apply it across the whole of our Bubble app, then we go into settings and SEO and meta tags, and you'll see here that I've opened a style tag, and that's telling the web browser to expect to receive some CSS. And so I have copied in some CSS that I found. I just Googled how to add text gradient using CSS, and I found this demo, this page explaining all of it.

Implementing the CSS for Text Gradients

I've basically experimented with it, and I've copied out what I think are the key elements, at least in order to get what I've shown you here. But let me go through and explain each part. So text gradient here, this is the ID of my text element. So if I go back to design, you can see that I've written in text gradient there, and that has to be, you know, letter for letter, a copy, identical in order for the CSS to be applied to this element. So I can call it anything I like. I can even add dynamic values in here if you wanted to apply different gradients to say different rows, text in different rows on the table.

Customizing the Gradient

You can do that with this, but I'm showing you just a really simple approach. If I go back here, you can see that I'm setting a background image, and the background image is a linear gradient at 45 degrees, and these are two HTML hex colors. And you can easily find this, you can find a color picker online to give you these hex code colors. We then have a couple of elements here that basically try and make text gradients backwards compatible with older or different browsers.

Browser Compatibility

For example, WebKit here, that's referring to Safari and Apple devices, if they're using their default browser, it's WebKit. And then we've got Moz here standing for Mozilla Firefox. And that's simply because the text background gradient is on the newer end of what you can do with CSS, so we have to apply some parameters here to make it background. Make it backwards compatible, you know what I mean.

Customizing Colors and Gradients

So you would change the gradients here, you would change the colors, I believe you could add more than one, more than two colors in here if you wanted to. But yeah, there you have it, that's how you can add a background gradient to text. And if you've loved this video, if you found it useful, we would love and really appreciate it if you could hit like and subscribe. And if you want even more Bubble tutorial videos, you can find more on our website at planetnocode.com.