CSS · one gradient
Spotlight cards
A soft light that follows the pointer across a grid of cards, lighting whichever it is over.
Yours to take. No sign-up, no email, no attribution needed.
The code, in two parts
.card {
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .3s ease;
background: radial-gradient(
420px circle at var(--mx, 50%) var(--my, 50%),
rgba(234, 159, 144, .42),
transparent 46%
);
}
.card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.card::before { transition: none; }
}for (const card of document.querySelectorAll('.card')) {
card.addEventListener('pointermove', (e) => {
const r = card.getBoundingClientRect();
card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
card.style.setProperty('--my', (e.clientY - r.top) + 'px');
});
}We do this for a living, on bigger things.
Tomoe builds operations software for businesses running real money through spreadsheets and WhatsApp threads. The same care that went into this effect goes into an order portal that a warehouse depends on.