CSS Selection Color Generator

Branding text selection with ::selection

When a user highlights text on your page — by dragging, double-clicking or hitting Ctrl/Cmd + A — the browser paints a system-default background behind the run of characters (blue on macOS, the accent color on Windows). The ::selection pseudo-element lets you override that paint and align it with your brand identity. The syntax is simple:

::selection {
  background: #ff00de;
  color: white;
}

Firefox historically required the vendor-prefixed ::-moz-selection. From Firefox 62 (2018) it accepts the unprefixed version, but adding both is still common for legacy support and is harmless.

What you can — and cannot — style

The W3C spec restricts ::selection to a small whitelist: background-color, color, text-shadow, text-decoration, caret-color and a few stroke/fill properties. You cannot change font-size, border, padding or apply a linear-gradient background — only a flat color. This is intentional: text reflow during selection would be confusing and expensive to repaint.

Scoped selection for code blocks and dark sections

You can scope ::selection per ancestor — Stripe uses a purple selection across the marketing site but switches to white-on-black inside their docs code blocks:

::selection { background: #635bff; color: #fff; }
.code-block ::selection { background: #fff; color: #000; }

The companion property caret-color sets the blinking cursor color inside inputs and contenteditable areas — pair it with your selection palette for cohesion.

Accessibility and dark mode

The selected text still needs to be readable. WCAG 1.4.3 requires a 4.5:1 contrast ratio between color and the new background — picking neon yellow on white passes legibility for some users but fails for everyone with low vision. For dark mode, wrap a second selector in @media (prefers-color-scheme: dark) and adjust the colors so they remain legible on the dark canvas.

Browser support and performance

Support is universal in every modern browser (Chrome, Firefox, Safari, Edge — even IE 9 implemented it). Performance impact is zero: the new colors only paint during an active selection. Print stylesheets do not need to override anything because selection state is not preserved on paper.

FAQ

Can I use different selection colors per section of the page? Yes. Selectors like article ::selection { background: gold } and footer ::selection { background: gray } coexist freely. When a selection drags across the boundary, each element paints with its own scoped rule.

Can I apply a gradient or image as the selection background? No. The spec only accepts a single solid color. Browsers ignore gradients and images on ::selection entirely.

Is ::selection with double colons the same as :selection? No. Only the double colon form is valid — the single-colon variant was never standardized and is silently ignored by every browser.

Why would I make the selected text invisible? Some sites set color: transparent on selection inside code samples to discourage copy-paste of API keys or to defeat naive scraping. It does not block determined users but raises the friction.