Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

interactionsRauno

Decorative Elements Disable Pointer Events

MUST

MUST: Set `pointer-events: none` on purely decorative layers (glows, gradients, overlays) so they never intercept clicks meant for elements underneath.

Decorative elements like glows and gradients should disable pointer-events to not hijack events

.glow { position: absolute; inset: 0; pointer-events: none; }

Bad

Good

Why it matters

Decorative overlays like gradient backgrounds, glow effects, and visual embellishments can intercept clicks meant for interactive elements underneath. Always set pointer-events: none on purely decorative elements.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.