🎯 CSS Selection Color Generator

EN δΈ­ζ–‡
← Back to Home

βš™οΈ ::selection Settings

Customize background and text color when text is selected.

100%

πŸ‘οΈ 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

Design Tips

Browser Support

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