CSS Neon & Glowing Text

24 CSS neon and glow text effects: flickering neon signs, tube outlines, pulsing glows and retro lights, built from layered text-shadow.

Neon Flicker Text

Glowing text that flickers like a neon tube with a loose connection. Layered text-shadows make the glow and a few sharp dips in opacity make the flicker. Best on dark backgrounds.

neon · glow · loop · dark

Glowing Typewriter Text

Letters arrive white hot, glowing in the accent color, and cool down to solid color a moment later, so the newest letters always burn brightest and the typing head leaves a fading trail.

typing · glow · letters · one-shot

Glow In Text Effect

Letters switch on one by one as bright, glowing shapes, then cool down to the plain text color as the bloom fades. The glow is a two-layer text-shadow that shrinks to nothing.

reveal · letters · glow · one-shot

Fire Text Effect

Flame tongues rise through red and orange letters while a blurred orange glow flickers behind them. The fill is tiled radial gradients moving up; the glow only animates transform and opacity.

gradient · glow · loop · colorful

Gradient Glow Text

A flowing gradient headline with a soft halo made of the same colors, so the glow changes hue under each letter as the colors travel. The halo is a blurred copy on the same keyframe.

gradient · glow · loop

Lava Text Effect

Glowing molten letters with dark crust drifting across them in two layers, so cracks of bright orange open and close. Crust patches are tiled radial gradients moving in opposite directions.

gradient · glow · loop

Neon Sign Turn On Effect

Every letter starts as a dead glass tube and stutters to life on its own schedule, then the sign stays lit. Plays once; per-letter delays sit inline so the stutter never looks mechanical.

neon · glow · letters · one-shot

Neon Outline Text Animation

Hollow neon tubes light up one letter at a time, hold, then switch off in the same order, like a casino marquee. Stroke-only letters get their glow from drop-shadow filters.

neon · stroke · letters · loop

Broken Neon Sign Text

A framed neon sign where every tube burns steadily except one letter, which buzzes, cuts out and comes back. Only that letter's span is animated; the rest is static glow.

neon · glow · retro · loop

Neon Glow Pulse Text

Soft neon that breathes: a blurred copy of the word behind it swells and fades on a slow cycle. Only the copy's opacity and scale animate, so the glow is cheap even at large sizes.

neon · glow · subtle · loop · tailwind

Synthwave Retro Text

An 80s chrome title with a pink glow over a neon grid that scrolls toward you. The grid is two gradient layers on a pseudo-element tilted with perspective; only its background moves.

retro · neon · colorful · loop

CRT Screen Text Effect

Glowing text on a small curved CRT screen with scanlines, a vignette, a faint flicker and a bright roll bar drifting down. The layers are pseudo-elements; only transform and opacity move.

retro · glow · loop

Hologram Text Effect

Translucent, scan-lined letters float over a projector beam, flicker, and get swept by a bright scan bar. The lines are a scrolling mask, the beam is a clipped gradient under the word.

glow · glitch · loop

Matrix Rain Text Effect

Columns of falling glyphs rain down behind a word, each at its own speed, fading toward the top like a trail. Every column is vertical text moved with transform, desynced by negative delays.

glow · cinematic · loop

LED Dot Matrix Text

Text built from glowing dots on a dark LED board, wiping on column by column, holding, blinking twice and clearing. A radial-gradient mask turns the letters into dots aligned with the board.

retro · glow · loop

Neon Border Trace Text

A neon sign whose frame is a dim glass tube with two sparks of light racing around it, while the lettering burns steadily inside. The frame is one SVG path with pathLength set to 100.

neon · glow · stroke · loop

Two Color Neon Sign Text

Two neon words that take turns: both burn, one stutters off, the other hands over, then both come back. The second color is your accent pushed round the color wheel with hue-rotate.

neon · glow · words · loop

CRT Power Off Text Effect

The text collapses into a bright horizontal line, shrinks to a glowing dot and blinks out, then powers back on the same way, like an old tube TV. Scale transforms plus one pseudo-element line.

retro · glow · cinematic · loop

Electric Text Effect

Hot, glowing letters with small lightning bolts that crackle around them in quick double flashes. The bolts are inline SVG polylines, each flashing with steps() on its own delay.

neon · glow · cinematic · loop

Heartbeat Text Animation

A double beat, lub then dub, ripples through the letters with a soft glow on each thump. The stagger is only 40ms per letter, so it reads as one heartbeat rather than a wave.

loop · letters · glow

Marquee Lights Text

Letters light up in the chase pattern of a theater marquee: every third bulb on, stepping along the sign. The delay is the letter index times one step, so any word chases without extra CSS.

loop · letters · glow · retro

Glowing Underline Animation

A glowing comet runs along a faint underline and trails off, over and over, for launch and coming soon lines. The comet is a gradient tile on a pseudo-element with a drop-shadow glow.

glow · loop · subtle

Seven Segment Digital Clock

An LED clock drawn from real seven-segment digits, seconds ticking and the colons blinking. Each segment reads a ten-cell color strip, so any digit is just --d: 0 to 9 on the element.

numbers · retro · glow · loop

LED Scrolling Sign Text

A dot-matrix LED sign: text scrolls behind a fixed grid of round pixels, so it lights them up as it passes, over a field of dim unlit dots. The grid is a radial-gradient mask; no images.

loop · retro · glow

How to use these neon text

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required. Classes are prefixed per effect so several can share a page.

To change the color, set --txt-color on the element or any ancestor. To change the size, set --txt-size: offsets, shadows and letter spacing are all in em, so they follow the font size.

One-shot effects such as the typewriter and the reveals play when the element appears. To trigger them later, add the class when you need it, or toggle animation-play-state.

Every snippet ships with a prefers-reduced-motion rule that jumps straight to the finished state for people who asked their OS for less motion, so the text is always readable.