Neon Buzzline / Glowing text CSS
Glowing text CSS generator
Give a heading the neon treatment with nothing but CSS. Shape the glow with a few sliders, fine-tune each text-shadow layer, and copy the finished rule.
Stay bright
/* Tilt Neon is a free font (SIL Open Font License). Load it on your page, or the fallback font is used. */
/* Designed on a #1c1012 background; a glow reads best on a dark one. */
.neon-text {
font-family: "Tilt Neon", sans-serif;
font-weight: 400;
font-size: 72px;
color: #fff0f8;
text-shadow:
0 0 1.8px rgba(255, 255, 255, 0.9),
0 0 4.2px rgba(255, 255, 255, 0.5),
0 0 4.6px rgba(255, 58, 167, 0.9),
0 0 13.8px rgba(255, 58, 167, 0.8),
0 0 26.5px rgba(255, 58, 167, 0.7),
0 0 42px rgba(255, 58, 167, 0.6),
0 0 60px rgba(255, 58, 167, 0.5);
}
<p class="neon-text">Stay bright</p>
How a CSS glow works
Neon on the web is just text-shadow with no offset and a blur. One shadow looks like a smudge; several, each wider and fainter than the last, build up the bright halo of a lit tube. Two tight white layers right against the letters add the white-hot core you see in real neon.
- Radius sets how far the outermost layer spreads; layers and strength set how dense the glow is.
- em units scale the glow with the font size, which suits responsive headings; px keeps it fixed.
- Flicker and pulse animate opacity, which is cheap for the browser, and the CSS switches them off for visitors who ask for reduced motion.
Keep it readable
Contrast is measured between the letters and the background, not the glow, so keep the letters themselves pale on a dark page. Big blurred shadows can also slow scrolling on older phones: save the effect for a heading or two.
Questions
Do all browsers support this?
Yes. Multiple text-shadow layers and keyframe animation work in every current browser, so the copied CSS needs no prefixes or fallbacks.
Why use a web font for the preview?
Glow follows the shape of the letters, so the font changes the look a lot. If you pick Tilt Neon or another web font, load it on your own site too; otherwise the fallback font in the CSS takes over.
Can I glow a button or a box instead of text?
Use the same layer values with box-shadow instead of text-shadow: it takes the same offset, blur and colour list, plus an optional spread.