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

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!