How to Change Text Highlight Color in Bubble
All our Bubble components. Each of them is ready to use, fully responsive and built with UI best practices in mind.

Thomas Couderq
16 Jan 2025
You know the expression "The devil is in the details" right?
Well, this is especially true for Front-End Design.
And Bubble is no exception to this.
In this article, you'll learn how to modify the text highlight of a Bubble app for free, and without any plugin.


To go further, you can also read our article on how to create a text gradient in Bubble.
Step 1 : Adding some CSS Code
The one and only step to change the text highlight of your Bubble apps is to paste some simple CSS Code into your app's header.
To do this, simply go to Settings --> SEO/Metatags and location the "Script/meta tags in header" section.

In this section, you'll need to paste this code (you can copy/paste it directly) :
In short, this CSS Code simply modifies the Background and Text color of the text currently selected.
To personalize it to your colors, simply modify the YOUR-COLOR placeholder in the code (with hexadecimal code).


Conclusion
You're all set, now you simply have to hit preview to see the result !
Since we've this into the header of our apps, it will be applied on every page of your apps.
But if you want to show only on on page, you can simply remove the code from the previous section, and paste it into the page header instead !


Thomas Couderq
Founder @ Nocodable
I've been building with Bubble for more than four years now. I've launched several projects (with more or less success). I'm passionate about no code and UI Design, which led me to founding Nocodable Components to help founders and professional Bubble developers build faster on Bubble.
Blog
Continue reading!
Check out our other tutorials to continue improving your Bubble skills!