Card with color glow reveal on hover

A blurred two-tone gradient sits offscreen inside each card and fades in on hover using mix-blend-mode. Subtle at low opacity; push past .5 and it starts looking like a colored highlight instead of a glow.

pattern · vercel.com card animation-hovervanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="v-glow-grid">
  <div class="v-glow-card">
    <div class="v-glow-fx" aria-hidden="true"></div>
    <h4>Fast identity</h4>
    <p>Verify every request without slowing anything down.</p>
  </div>
  <div class="v-glow-card">
    <div class="v-glow-fx" aria-hidden="true"></div>
    <h4>Global network</h4>
    <p>Deploy close to users on every continent.</p>
  </div>
</div>

Block id: vercel-hover-glow-cardvanilla · drop-in

More card blocks

Split hero with booking-card mockup

cal.com

Floating booking-confirmation mockup card

cal.com

Issue tracker card with live activity feed

linear

Rotating project health status list

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call