Neon Selection
Interactive & Advanced · Animated · pure CSS
The payoff is dormant until you drag-select the text: the selection inverts the glyphs, flipping the background to the text's resting hue and the foreground to a blazing bright tone while a layered neon bloom ignites. At rest it's a restrained two-tone heading with a faint underline and a slow glow pulse — just enough hint to invite the select.
How it works
Neon Selection is an animated interactive & advanced text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Neon Selection exposes 3 dedicated controls — Hue, Selection Glow and Invert — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Neon Selection — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
position: relative;
color: hsl(38 55% 76%);
text-decoration: underline;
text-decoration-color: hsl(38 70% 62% / 0.45);
text-decoration-thickness: 2px;
text-underline-offset: 0.16em;
cursor: text;
animation: text-effect-pulse 3.2s ease-in-out infinite;
}
.text-effect::selection,
.text-effect *::selection {
background-color: hsl(38 35% 96%);
color: hsl(38 60% 55%);
text-shadow:
0 0 6px hsl(38 90% 62%),
0 0 12px hsl(38 90% 62%),
0 0 20px hsl(62 90% 58%),
0 0 36px hsl(62 90% 58%);
text-decoration: none;
}
@keyframes text-effect-pulse {
0%, 100% { text-shadow: 0 0 3px hsl(38 60% 60% / 0.25); }
50% { text-shadow: 0 0 9px hsl(38 70% 65% / 0.55), 0 0 16px hsl(38 60% 60% / 0.25); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Interactive & Advanced
- Type
- Animated
- Browser support
- ::selection styling; glow in Chromium & Safari
- Capabilities
- pure