The coloured glow check: what counts as a glow and why it dates a page

Shadow versus glow

A shadow imitates light falling on a raised object, so it's dark, fairly tight and offset slightly downwards. Interfaces use it to say “this sits above that”. A glow does something else: it spreads a wide halo of colour around an element as if it were lit from inside. It works in a few places, a synthwave game menu say, and it was everywhere in the dark “AI product” look of recent years, where every call to action floated in a cloud of purple. Because templates and models picked it up as a default, it now dates a page to that look more than it says anything about the business.

The exact rule

The Critic doesn't guess from screenshots. It reads the box-shadow declarations in the page's style element, splits any declaration that lists several shadows, and tests each one on its own. A shadow is counted as a glow when all three of these hold:

1. Its blur is 40px or more. The blur is the third length in the value, after the horizontal and vertical offsets. Spread, the optional fourth length, isn't considered.
2. It isn't black. Shadows written as black, #000, #000000 or an rgb() or rgba() of 0, 0, 0 at any transparency are treated as ordinary shadows.
3. It names a colour. A hex code, rgb(), hsl(), oklch(), color-mix() or a var() custom property all count, because a variable could hold any colour.

When the check fails, the Report tab shows the offending shadow value itself, so you can find it in the stylesheet straight away.

How Anticode's design systems handle depth

Most of Anticode's seven design systems set card and button shadows to none and lean on borders, spacing and background tone to separate things. Where a system does use a shadow it's a deliberate one: Brutalist buttons, for example, carry a hard offset shadow with no blur and shift towards it on hover, which reads as print rather than neon. Each site has a single action colour, and that colour goes on buttons and links rather than into a halo around them.

Making an element stand out without a glow

• Contrast first. A solid button in the action colour against a calm background already draws the eye. If it doesn't, the background is probably too busy.
• Space. Give the main call to action room. Isolation is a stronger signal than a halo.
• A border or a tonal panel. A featured pricing plan can sit on a slightly different background, or carry a border in the text colour.
• A dark, low-opacity shadow if you need lift. Keep it black and modest; that passes the check and still separates layers.

For the wider design history, read glow effects in web design and the companion shadows in UI design.

Limits

• Reported, not enforced. The coloured glow check is one of the Critic's nineteen design checks. The publish-time design gate doesn't include it, so a deliberate glow can still be published.
• box-shadow only. Glows made another way, such as text-shadow, a filter: drop-shadow() or a blurred background shape, aren't caught.
• Stylesheet only. Shadows in inline style attributes aren't read by this check.
• Design-engine pages. Model-written apps aren't run through the Critic's nineteen checks.

Questions people ask

Why is a white glow flagged?

The coloured glow check treats every colour except black as a glow once the blur reaches 40px. A wide white halo on a dark page is the same effect in a different colour.

Can I keep a soft shadow under my cards?

Yes, if it's black at any transparency, or its blur is under 40px. Those count as ordinary shadows.

Does a glow stop my site publishing?

No. It shows in the Report tab with the shadow value; publishing isn't blocked by it.

Is a glow ever the right choice?

Sometimes, for a game, a nightlife brand or a deliberately retro look. The check exists so it's a decision rather than a default.