20 CSS Neon Effects

Stack shadows rather than enlarging one. A single large blur — something like 0 0 48px cyan — spreads the same light evenly and reads as a coloured smudge, because real emitted light does not fall off linearly. Three tiers do read as light: a tight, almost-opaque core at small blur that says where the light comes from; a mid halo at roughly half the core's alpha and three times its blur, which carries the falloff; and a wide, very dim bloom that suggests light spilling into the surrounding air. The same principle applies whether you are using box-shadow on a box or text-shadow on type. The one rule that governs all of it is that glow only reads as light against a dark ground — the effect is additive brightness, and on white there is nothing left to add. Demo 01 renders the one-layer and three-layer versions side by side with every value annotated.

Because box-shadow follows the element's box, not its visible pixels. Applied to a transparent PNG, an inline SVG icon, or anything cut with clip-path, it draws a halo around the bounding rectangle while the artwork inside floats unlit. filter: drop-shadow() solves it by following the alpha channel instead, so the glow traces the actual silhouette. Two costs come with that. drop-shadow is more expensive than box-shadow, and stacking three of them to build the layered effect compounds it, so keep the stack shallower on anything animated. And because it is a filter, it establishes a containing block for fixed-position descendants, which occasionally surprises people who have a positioned child inside the glowing element. Demo 02 shows both applied to the same clipped shape with the box-shadow version visibly wrong.

Because perceived luminance varies enormously by hue even at identical lightness values. Cyan and magenta sit near the top of the visible range and glow convincingly at modest alpha; a deep blue or a brown at the same shadow settings looks dull and slightly dirty, because there is far less perceived brightness to spread. This is why a neon palette copied from a tutorial falls apart the moment you recolour it to match a brand. The fix is to stop treating alpha and blur as fixed and let lightness vary per hue — oklch() makes that practical because its lightness channel is perceptually uniform, so equal L values across hues actually look equally bright. Demo 03 applies one shadow recipe across eight hues, labels the failures, then shows the corrected version.

Do not animate the shadow. Large blur radii are among the most expensive things a browser repaints, and neon uses several per element by construction, so animating box-shadow or filter repaints the entire blurred area on every frame. Build the glow once on a dedicated layer, then animate that layer's opacity or transform, which composites instead of repainting. The other half of the answer is that an unregistered custom property cannot interpolate at all — animating --glow silently does nothing, which is the most common reason a pulse appears not to work. Registering it with @property and a typed syntax makes intensity animatable independently of hue, so a pulse can brighten without shifting colour. Demo 07 races both approaches under a deliberate main-thread load, and demo 05 shows the silent no-op beside the registered version.

Only if the contrast comes from the glyph rather than the glow. A diffuse halo supplies no reliable contrast — it is soft-edged, semi-transparent and varies across its own area — so the core colour has to carry the full 4.5:1 against the background on its own, measured with the glow disregarded entirely. The trap is that saturated neon on near-black often looks vivid while measuring well below that, because the glow reads as brightness the contrast algorithm does not count. Stroke weight matters too: a thin glyph with a heavy bloom loses its edges into the glow and gets harder to read the more impressive it looks. And any pulsing must respect prefers-reduced-motion by stopping the animation without dimming the text, so reduced motion never becomes reduced legibility. Demo 08 shows a failing heading with a live contrast readout beside the corrected version.

Only under a hard limit. WCAG 2.2 SC 2.3.1 allows no more than three flashes in any one-second period, and a luminance flicker that breaks it is a genuine seizure risk rather than a taste question. That constraint shapes how a convincing flicker is built: the realism comes from irregular timing rather than speed — long stable stretches broken by short clusters, with steps() for the abrupt on-off transitions and a few very brief dead intervals where the tube fails entirely. Even paced, an evenly blinking sign both looks fake and approaches the limit faster. The flicker in this collection runs at roughly 1.8 flashes per second, comfortably inside the threshold, and is fully disabled under prefers-reduced-motion. Demo 15 documents the timing directly.

Not really, and it is worth being honest about that rather than shipping a light variant that pretends otherwise. Glow is additive brightness: the shadow layers add light to what is behind them, so against white there is no headroom left and the same declarations render as a soft grey-coloured blur — closer to a dropped shadow than to emitted light. Every demo here is dark-grounded by default for that reason. The light variants exist and are usable, but they are a muted treatment: the glow is reduced, the core colours are darkened to hold contrast, and the effect reads as a coloured accent rather than as light. If a design genuinely needs a light background, a solid accent colour or a crisp border will communicate emphasis far better than a weak glow.

Three collections sit adjacent and each owns a distinct thing. This one covers the lighting technique itself — how the glow is constructed, which properties build it, what it costs, and how to keep it accessible. css-neon-text-effect (20 demos) owns neon applied to type: flickering signs, synthwave headings, glitch text, gradient flow, the Tailwind text-glow utility, and typing terminals. css-glowing-border-buttons (15 demos) owns glow applied to buttons and borders as components: rotating gradient borders, cyberpunk corner treatments, breathing pulses. If you are asking why your glow looks like a smudge, why it haloes a rectangle around your icon, or why your palette went muddy when you recoloured it, you are in the right place. If you want a finished neon headline or a glowing CTA, the other two are the faster route.