Neon Sign
Neon & Glow · Animated · pure CSS
Glowing text inside a glowing rounded border box — outer and inset halos that breathe on a loop. A complete neon storefront sign.
How it works
Neon Sign is an animated neon & glow text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Neon Sign exposes 3 dedicated controls — Hue, Glow and Pulse — 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 Sign — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bungee', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
}
.text-effect {
display: inline-block;
padding: 0.18em 0.34em;
border: 2px solid hsl(172 90% 60%);
border-radius: 0.32em;
color: hsl(172 95% 66%);
text-shadow: 0 0 5.6000000000000005px #fff, 0 0 14px hsl(172 95% 66%);
box-shadow: 0 0 8.4px hsl(172 100% 60% / 0.85), 0 0 22.400000000000002px hsl(172 100% 60% / 0.85), inset 0 0 7px hsl(172 100% 60% / 0.85);
animation: text-effect-buzz 3.6s ease-in-out infinite;
}
@keyframes text-effect-buzz {
0%, 100% { opacity: 1; }
50% { opacity: 0.86; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Neon & Glow
- Type
- Animated
- Browser support
- text-shadow + box-shadow (outer/inset) glow on a bordered box
- Capabilities
- pure