WebCraft

Home / Elements / hover

radial-gradient at var()

A spotlight that follows the cursor

Move the cursor here

The light follows the pointer. Two custom properties change; nothing re-renders.

CaveatGate it behind @media (hover: hover) and (pointer: fine). On a touchscreen :hover latches after a tap, so the light switches on and stays on with nothing hovering it.

FallbackPut the glow on a pseudo-element and animate opacity. Animating the background itself repaints the whole card on every pointer move.

CSS + JS 
.card::before {
  background: radial-gradient(220px circle
    at var(--x) var(--y),
    #6fa8dc44, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.card:hover::before { opacity: 1; }

// x and y as percentages of the box
el.style.setProperty('--x', x + '%');

Published

Also tagged hover