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!
