The CSS text-shadow property is rightly popular but don’t forget this quick bit of code to avoid making it hard to highlight text.

I only really got round to fixing this today so I figured I’d quickly remind those of you using text-shadow properties on your own or client sites to just double check you have some styling in place for highlighted/selected text.

Fuzzy highlighting

Clear highlighting

The first shot is my own blockquote styling when highlighted. It’s because it’s got a white shadow which adds to the fuzzy appearance. By adding the following style into your css, you can sort that out.

The quick fix

::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}

There you go, just a small thing but one that’s easy to overlook and potentially makes it a minor annoyance to your users who highlight text.

*Yes, it’s now two times and counting I’ve accidentally overwritten my own stylesheet with an older version and not implemented my own advice *slap*

Updated per Florian’s comment below to include Firefox and Webkit declarations for completeness :)

James Young

Written by James Young

I'm always looking for interesting work opportunities, if you'd like to work together please get in touch.

Join me on Twitter & Dribbble.