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

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!).

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:

body::selection{
    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!