What is the CSS ::selection pseudo-element?

::selection is a CSS pseudo-element that styles text when users highlight/select it on a page. You can customize the selected text's background color and text color for better branding and UX. Supported in all modern browsers.

Which CSS properties work with ::selection?

The main properties are color (text color) and background (background color). text-shadow and -webkit-text-fill-color work in some browsers but aren't guaranteed across all browsers.

How do I target specific elements?

Combine with selectors: .article-content::selection { background: #ffd700; color: #000; }. You can set a global ::selection as base and override for specific elements.

What about Firefox compatibility?

Old Firefox (before v62) used ::-moz-selection prefix. Write both ::-moz-selection and ::selection in your CSS for cross-browser support. Modern Firefox uses the unprefixed version.

Free Online CSS Selection Color Generator

← Back to Home

Updated: 2026-07-11

⚙️ ::selection Settings

Customize background and text color when text is selected.

Selection BG

Selection Color

Normal Text Color

Selector Scope

Opacity (bg transparency) 100%

Add text shadow

👁️ Live Preview

Select any text below to see the custom selection style in action.

📖 Select this text to see the effect

Drag your mouse to select this text — the background and text color will change to your configured values. This is the power of the CSS ::selection pseudo-element, giving you full control over how selected text appears on your website.

            💡 Tip: Try selecting text in this highlighted area too, and notice how the selector scope affects different elements.
          

Well-designed selection styles enhance brand consistency and improve the reading experience. Many popular websites like Twitter and GitHub use custom selection styles.

💻 CSS Code

📖 CSS ::selection Explained

The ::selection CSS pseudo-element controls how selected/highlighted text appears on your page.

Supported Properties

color — Selected text color
background — Selected text background color
text-shadow — Text shadow (limited browser support)

Design Tips

Match selection background to your brand color
Ensure sufficient contrast for readability
Avoid overly bright selection backgrounds
Use light selection in dark mode, dark selection in light mode

Browser Support

::selection works in IE9+ and all modern browsers. Firefox v62+ uses the unprefixed version (use ::-moz-selection for older versions).

🎯 CSS Selection Color Generator