Glow effects in web design: when a glow is a theme and when it's a tell
A soft coloured halo under every button and card has become one of the quickest ways to spot a generated page. A glow is justified when the design is about light: neon signage, a synthwave or arcade theme, a screen-like interface on a dark ground. Elsewhere, depth comes better from a neutral shadow, a border or a change of surface, and focus from a solid outline.
How the glow became a tell
A shadow imitates something blocking light: it's dark, offset downwards, and fades. A glow imitates something giving off light: it's the element's own colour, spread evenly around it. In CSS both come from the same property. As MDN's box-shadow reference describes, a shadow is two offsets, an optional blur and spread, and a colour, so 0 0 60px rgba(124, 58, 237, .5) turns a shadow into a purple halo with one value.
That ease is the problem. Dark landing pages with a gradient headline, a violet glow under the primary button and glowing borders on three feature cards became a template look, and generated sites reproduce it by default. On a page that isn't about light, the glow doesn't mean anything. It's decoration that says the page came from the same mould as a thousand others.
Where a glow is justified
| Context | Why it works | Keep it honest by |
|---|---|---|
| Neon or synthwave themes | The theme is light on dark; glow is the subject | Glowing type and lines, not every card |
| Arcade and game interfaces | Screens and lights are the setting | Reserving the strongest glow for the active element |
| A single live or recording indicator | A light that is literally on | Pairing it with a word, such as "Live" |
| Product shots of lit objects | Lamps, signs, screens | Letting the photo carry it, not the UI |
| Dark dashboards with status lights | A status lamp metaphor | Never using colour alone for status |
In each case the glow comes from the content. A synthwave site can glow because the 1980s neon look is the brief; a dentist's booking page can't borrow it for its button.
Better ways to get depth and emphasis
- Neutral shadow, small and offset.
0 1px 2px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .06)lifts a card without colouring the page. - A border. A 1px line in a muted tone separates surfaces cleanly in both light and dark themes.
- A change of surface. A slightly lighter panel on a dark ground reads as raised; see shadows in UI design.
- A hard offset shadow for brutalist and neo-brutalist styles, where the shadow is a graphic device with no blur.
- Emphasis from colour and size. The main button already stands out if it's the only thing in the action colour.
Glows and focus styles
A glow is often used as a focus ring, and it's a weak one. A soft halo fades into the background at its edges, so its contrast is hard to guarantee. WCAG's Non-text Contrast criterion asks for 3:1 for the visual cues people need to identify a control's state, focus included. A solid 2px outline with a small offset meets that more reliably than any blur, and works in forced-colours modes where shadows are removed. See focus state design.
If the brief calls for neon
- Put the glow on type or thin lines, using layered
text-shadow(MDN's text-shadow reference shows several shadows stacked in one declaration), not on large blocks. - Keep the text itself readable: the glyphs need full contrast against the ground, with the glow as an extra.
- Avoid glows on body text. They blur the letters at reading size.
- Don't pulse or flicker it continuously. Moving light draws the eye away from reading and can bother people sensitive to motion.
- Check light mode. Coloured glows on a white ground look like smudges.
Glows in Anticode
The Critic flags coloured glows under buttons and cards: one of its nineteen checks looks for a large, soft box shadow (40px of blur or more) in a colour other than black and flags the page if it finds one. Anticode's design systems don't use them. Their buttons and cards rely on borders, surface colour and, in the Brutalist system, hard offset shadows with no blur at all. Afterglow Run, the synthwave arcade game in the template gallery, shows the kind of brief where light is the theme. Templates are app builds written by Anticode's model rather than pages in one of the seven systems; using one copies it into your project.
Questions people ask
Why do so many AI-built sites have glowing buttons?
The dark gradient template with a coloured halo under the main button became very common, and generated pages tend to reproduce the most common patterns.
Is a glow a good focus style?
Not on its own. A solid outline with enough contrast is clearer and survives high-contrast modes.
When is a neon glow button appropriate?
When the whole design is about light, such as a synthwave, arcade or neon-sign theme, and the glow is used sparingly within it.
Sources
- box-shadow, MDN Web Docs, checked
- Understanding SC 1.4.11: Non-text Contrast, W3C, checked
- text-shadow, MDN Web Docs, checked