CSS Glow Effect Generator

CSS glow effects: neon, halo and glassmorphism

A glow is the soft halo of colour you see around a luminous object — neon signs, screens in the dark, sci-fi UI buttons. In CSS, glows are usually built with box-shadow for boxes or text-shadow for text, both of which accept a colour with alpha and a blur radius. The key trick is stacking several shadows of the same colour with different blur radii so the light falls off gradually, just like a real lamp.

.neon {
  color: #fff;
  text-shadow:
    0 0 5px  #ff00ff,
    0 0 10px #ff00ff,
    0 0 20px #ff00ff,
    0 0 40px #ff00ff;
}

For arbitrary shapes — an icon with an irregular outline, a PNG with transparency, an SVG — filter: drop-shadow() is the right tool. Unlike box-shadow, which always traces the rectangular bounding box, drop-shadow respects the alpha channel of the source, so the glow hugs the actual silhouette of the element. You can stack drop-shadow calls inside the same filter to layer several halos.

box-shadow vs text-shadow vs drop-shadow

• box-shadow — fastest, follows the border-box, ideal for rectangular buttons and cards.
• text-shadow — paints behind each glyph; perfect for headings, neon signs and pixel art.
• filter: drop-shadow — respects transparency; the only option for SVG/PNG icons and clipped shapes. More expensive on mobile GPUs.

Animating the glow

Glows look alive when they pulse. Animate opacity, the shadow colour or even the blur radius inside a @keyframes rule, alternating with animation-direction: alternate for a breathing effect. For a flickering neon-sign feel, use erratic steps and animation-timing-function: steps() instead of ease-in-out. Heavy or fast colour pulses can trigger photosensitive seizures, so always provide a prefers-reduced-motion fallback.

Glassmorphism and dark mode

Glows shine on dark backgrounds — the contrast between bright halo and deep canvas is what reads as "luminous". On light backgrounds, the same shadow disappears or looks like dirt, so adjust intensity with a @media (prefers-color-scheme: dark) query. The "glassmorphism" trend popularised by macOS Big Sur (2020) pairs a subtle glow with backdrop-filter: blur(10px) on a semi-transparent panel — the blurred backdrop simulates frosted glass and the glow reinforces the "lit from within" look. Synthwave and cyberpunk aesthetics push this further with saturated magenta/cyan glows over near-black backgrounds.

FAQ

Why doesn't my box-shadow follow the icon shape? box-shadow always uses the element's box, not its visible content. For irregular silhouettes (SVG, transparent PNG), switch to filter: drop-shadow().

Are multiple shadows expensive? Each shadow is a separate paint pass. Three or four are fine; ten on hundreds of elements will hurt scroll on mobile. Test on a low-end Android and lower the count if frame rate drops.

How do I make a coloured halo around an image? Use filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.8)). For images without transparency, you can also wrap them and place a blurred copy underneath with filter: blur(20px) brightness(1.2).

Does glow improve accessibility? A glow on focused buttons can supplement (but not replace) the focus ring. Keep the native focus outline visible or replicate it with a high-contrast border, otherwise keyboard users will lose their place on the page.