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) :

<style>
::selection { 
    background: #YOUR-COLOR; /* Background color for text selection */ 
    color: #YOUR-COLOR; /* Text color for text selection */
}
::-moz-selection { 
        background: #YOUR-COLOR; /* Background color for text selection in Firefox */ 
        color: #YOUR-COLOR; /* Text color for text selection in Firefox */
    }
</style>

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!

Nocodable

#1 Components library for Bubble. 350+ fully responsive components to build you app 10x faster.

Copyright ©2025 Nocodable

Nocodable

#1 Components library for Bubble. 350+ fully responsive components to build you app 10x faster.

Copyright ©2025 Nocodable

Nocodable

#1 Components library for Bubble. 350+ fully responsive components to build you app 10x faster.

Copyright ©2025 Nocodable