CSS ::selection playground

Explore ::selection with controls for changing the color, background, decoration, and shadow of user-selected text.

Select any fragment inside the block to see how the highlight changes.

Selection highlight

Selecting text is a native browser interaction. ::selection lets you customize the background color, text color, decoration, and shadow applied to the selected fragment.

Try changing the selector scope: global mode affects this whole preview and scoped mode only affects the editorial block.

HTML

<p>Select any fragment in the article to review the generated highlight styles.</p>

<article class="selection-demo">
  <h2>Selection highlight</h2>
  <p>This lab changes the colors, decoration, and glow that appear while the user selects text.</p>
  <blockquote>Scoped selection styles are useful in editorial blocks, notes, examples, and branded content areas.</blockquote>
</article>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<p>Select any fragment in the article to review the generated highlight styles.</p>

<article class="selection:bg-[#c7d2fe] selection:text-[#18122b] selection:underline selection:text-shadow-[0_0_4px_#7c3aed]">
  <h2>Selection highlight</h2>
  <p>This lab changes the colors, decoration, and glow that appear while the user selects text.</p>
  <blockquote>Scoped selection styles are useful in editorial blocks, notes, examples, and branded content areas.</blockquote>
</article>

CSS

.selection-demo::selection {
  background-color: #c7d2fe;
  color: #18122b;
  text-decoration: underline;
  text-shadow: 0 0 4px #7c3aed;
}