patterncssTip

pointer-events: none to allow clicks through overlay elements

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

pointer-eventsclick-throughoverlayinteractionhit-testingtransparent

Problem

A decorative overlay (shimmer effect, gradient fade, loading skeleton) sits on top of interactive content and blocks clicks, hover states, and keyboard focus on elements below.

Solution

Use pointer-events: none to make an element transparent to mouse and touch events:

/* Overlay that doesn't block interaction */
.shimmer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
  pointer-events: none; /* clicks pass through to elements below */
}

/* Gradient fade at bottom of scrollable list */
.list-fade::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

/* Re-enable for a specific child inside a none parent */
.interactive-child {
  pointer-events: auto;
}

Why

pointer-events: none removes the element from the hit-testing process. Clicks, mouseover, and touch events fall through to the element behind it in the stacking order.

Gotchas

pointer-events: none also disables cursor changes — the element is completely transparent to the pointer.
Children can re-enable pointer events with pointer-events: auto even if a parent has none.
Elements with pointer-events: none are still rendered and still participate in layout.
This property also works on SVG elements with additional values like visiblePainted.

Context

Decorative overlays, gradient fades, shimmer effects, or any visual layer that should not intercept user interaction.

Revisions (0)

No revisions yet.