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.

Using ID Attribute in the Bubble Editor

In the Bubble editor, you have the ability to add an ID attribute. 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 an ID attribute here, then you'll find it in settings, general, where you will scroll all the way down to the bottom. You should then click on this box that allows you to give the elements on your page a unique label appearing in the code. This is crucial because we're going to apply the text gradient using CSS.

Applying CSS on a Page Level or Across the Whole Bubble App

We can either apply CSS on a page level by putting our style tag and our CSS into the section here. But if we aim to apply it across our whole Bubble app, then we should go into settings, SEO, and meta tags. Here, you'll find a style tag that I have opened which tells the web browser to expect to receive some CSS.

Adding Text Gradient using CSS

So, I have included some CSS that I found by google on how to add text gradient using TSS. After experimenting with it, I have copied out what I think are the key elements to obtain what I've shown you here. But let me explain each part. Text gradient here is the ID of my text element

Back in design, I have written in a text gradient there. For the CSS to be applied to this element, it must be a letter for letter, identical copy. So, I can call it anything I like. I can even add dynamic values in here if I needed to apply different gradients to different rows, for text in different rows on the table using this simple approach.

Next step is setting a background image which is a linear gradient at 45 degrees in this case. These are two HTML hex colors, something you can easily find online with a color picker to give you these hex code colors.

Making Text Gradients Backwards Compatible

We then have a couple of elements here that essentially make text gradients backwards compatible with older or different browsers. For example, WebKit here refers to Safari and Apple devices, were you to use their default browser. We then have MS representing Mozilla FireFox. This is needed simply because the text background gradient is a relatively new aspect of CSS's capacities. Hence, we have to include some parameters to make it backwards compatible.

Consequently, you can change the gradient here and the colors. In fact, I think you could add more than two colors in here if you wanted to. But that's about it.

That's how you add a background gradient to text. And if you've loved this video and found it useful, we'd love it if you could hit like and subscribe. For more Bubble tutorial videos, feel free to visit our website at planetnocode.com.