CSS Selection Generator

Create custom text selection styles with the ::selection pseudo-element.
Customize background color, text color, and text shadow.

Select the text below to preview your selection style

The Quick Brown Fox Jumps Over the Lazy Dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Try selecting this text to see your custom selection style in action. You can customize the background color, text color, and even add a text shadow for a unique effect.

Presets

Background Color

Text Color

Text Shadow (optional)

Format: offset-x offset-y blur-radius color

CSS Code

::selection {
  background-color: #6366f1;
  color: #ffffff;
}

::-moz-selection {
  background-color: #6366f1;
  color: #ffffff;
}

About the ::selection Pseudo-element

Supported Properties

The ::selection pseudo-element only supports a limited set of CSS properties:

color
background-color
text-shadow
cursor

Firefox Support

Firefox requires the ::-moz-selection prefix for compatibility. Always include both rules in your CSS to ensure consistent styling across all browsers.

Browser Support

The ::selection pseudo-element is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has excellent cross-browser compatibility.

Need to see selection styles from real sites?

Frontend Hero's CSS Scanner lets you inspect any element's styles, including pseudo-elements like ::selection. See exactly how top websites style their text selection.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →