Tip #14: Change the text highlight color with ::selection

  • — Frontend

  • 1 min. read

  • — 2/17/2023

Try highlighting this text.

Notice how, by default, the browser applies a sort of blue-ish tint as the background color?

You can actually customize what this background color is to any color you want (yes, even your brand color!).

It's a really neat effect that, when done properly, can add a nice subtle brand boost to your website.

To do this, you'll need to use the ::selection pseudo-selector, applied to the body selector:

    background-color: yellow;

Keep in mind that the color you apply to the background will be solid, to make it transparent, consider using an rgba value instead (here's a HEX to rgba calculator).

You also can modify other, certain CSS properties within the ::selection pseudo-selector like:

  • text color
  • background color (we covered this)
  • text shadow
  • text decoration
  • text stroke

Happy highlighting!

Shaun Chander

hey (again), I'm shaun

I'm posting 3 tips on creative web development daily. Subscribe below to to get tips delivered straight into your inbox!