117
AI ready

Glowing Border Card Hover Effect

£10 or the whole Vault, £99

One holographic light shared by a whole grid of cards: the borders nearest your pointer turn to iridescent foil with a white specular, neighbouring edges catch it, and a featured card carries a travelling foil beam.

intermediate
5 more details
hover-effectpointer-trackingcustom-propertiesmicro-interactionvelocity-reactive

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Glowing Border Card Hover Effect demo in new tab

Released

About this effect

A holographic border hover effect for feature grids, pricing tables and dashboards. Instead of lighting one card at a time, a single light travels across the whole grid. The border segments closest to the pointer turn to iridescent foil, a prism of pink, gold, mint, sky and violet over brushed silver, with a white specular where the edge is nearest. The foil fades along each edge, so the cards beside the one you are over catch it too, and it blooms softly onto the page with fine glitter drifting through it.

Read the full effect overview

The hues shift as the light moves. Whip the pointer across the grid and the colours sweep round and the glare blooms, then settle. Inside the hovered card a soft spotlight sits under the content. One featured card carries a foil beam that travels round its border at rest and laps it once when it is clicked or reached with the keyboard.

Glowing Border Card Hover Effect - GSAP animation effect preview

What's included

8 items
  • One light shared across every card, lighting neighbouring edges as well as the hovered card
  • Holographic foil edge: a prism dodged over brushed silver, with a white specular nearest the pointer
  • Hues shift with the light's position; a fast whip sweeps them round and blooms the glare
  • Soft bloom and drifting glitter outside the lit edges, plus a spotlight under the hovered card's content
  • Travelling foil beam on a featured card, with a fast lap on click or tap
  • Keyboard focus parks the light on the card and sends the beam round once
  • Five foil hues and the silver set from CSS custom properties
  • Still foil highlight under reduced motion and without JavaScript, plus complete teardown

Perfect for

3 use cases
  • SaaS feature grids that need a premium hover without moving the layout
  • Pricing tables where a featured plan carries the orbiting beam
  • Dashboard tiles and integration directories on dark interfaces

How it works

1 section

The light is drawn entirely in CSS. Each card has a thin ring over its border filled with a prism grating colour-dodged onto a silver gradient, with a white specular on top, faded with distance from the shared light. Behind each card a bloom carries the same hues and two drifting glitter fields, and a conic gradient in the border draws the beam. GSAP smooths the light so it trails the pointer slightly, turns its speed into the hue sweep and glare, runs the beam's orbit and laps and the glitter clock, switches to the still version for reduced motion and removes everything cleanly on teardown. The cost stays the same however many cards the grid holds.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Glowing Border Card Hover Effect opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Mark up the grid and its cards:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect needs from your markup: one container with data-glow and any number of descendants with data-glow-card. The cards can sit in any layout (CSS grid, flex, a masonry list); the light is positioned from where each card really is. Give at most a couple of cards data-glow-featured for the orbiting beam. Links or buttons make the best cards because they are focusable, and focus drives the keyboard version of the effect.

What is only the demo's styling: everything under the DEMO heading in style.css: the Inter face, the page colours, the three-column grid, the icon tiles, the card padding and the cue line. Delete it and style the cards however you like.

CSS the effect depends on: the EFFECT block at the top of style.css. Cards need a border radius of your choice and nothing on ::before or ::after: ::before is the foil ring, ::after is the bloom and glitter behind the card. The effect owns each card's border (transparent, --glow-width wide) and background (fill, spotlight, beam and hairline), so set the fill with --glow-card rather than background. Cards are position: relative, and the container has isolation: isolate so the bloom stays above your section background. The bloom reaches --glow-bloom past the outer cards; if the container sits against a scrolling edge, give a parent overflow: clip.

Restyling the light

Set these custom properties on the [data-glow] container, or on a single card to override it there:

Property Default What it controls
--glow-c1 to --glow-c5 pink #ff5ca8, gold #ffc36a, mint #8dfcc8, sky #63b8ff, violet #b47cff The foil's five hues, in order round the prism. They colour the lit edge, the bloom, the spotlight and the beam
--glow-metal-hi, --glow-metal-lo #a9afba, #3c4049 The brushed silver the hues are dodged over. Brighter metal reads whiter and more chrome; darker reads more saturated
--glow-width 2px Thickness of the border, the foil ring and the beam
--glow-bloom 30px How far the foil spills outside each card onto the page
--glow-card #1c1c1c Card fill
--glow-hairline rgba(241, 239, 234, 0.1) The resting border

A cooler, chrome-leaning foil:

Code snippet omitted: it ships with the download.

Options

Attribute On Values Default Description
data-glow container present Turns the effect on for this group of cards
data-glow-card card present A card that catches the light
data-glow-featured card present Adds the orbiting border beam
data-glow-reach container px 220 How far the light reaches from the pointer
data-glow-intensity container 0 to 1 1 Scales the light, spotlight, speed stretch and beam together
data-glow-beam container 0 or 1 1 0 stops the autonomous motion: the travelling beam and the glitter drift (featured cards then light like the rest)

Interaction

  • Pointer: the light follows with a slight trail and the foil's hues shift as it moves. Speed stretches it along the direction of travel, sweeps the hues round and blooms the white glare; both settle as you slow down. Leaving the container fades it out over about 400ms.
  • Click or tap: the beam laps the card once, fast, as press feedback.
  • Keyboard: tabbing to a card parks the light on it, raises its spotlight and sends the beam round once. The light stays parked until focus moves on.
  • Touch: tapping lights the card from the tap point and the light decays. A sideways drag carries the light; vertical drags still scroll the page. The featured beam keeps orbiting.

Accessibility

  • Reduced motion: no beam orbit, glitter drift, trail, hue sweep or stretch. Hover and keyboard focus park a still foil light on the card's top corner, and the featured card shows a still beam.
  • No JavaScript: the same static version as reduced motion. All content is plain markup and always visible.
  • Focus: cards keep a visible focus ring in addition to the light.
  • Contrast: the light sits on the border and the spotlight stays faint, so text keeps its contrast at the brightest moment. In the demo the muted copy measures 6.2:1 and titles 12:1 beside the peak glow.
  • Both glow layers are pseudo-elements: nothing is added to the accessibility tree.

Performance

The light is a few custom properties on the container, written once per frame only while the light is visible or moving. Each card works out its own glow in CSS, so the per-frame cost does not grow with the number of cards. The foil, glitter and bloom are gradient layers; the only filter is a hue rotation on the two lit layers. Card positions are measured on resize, and a scroll only updates the container's position. While the grid is off screen nothing runs, including the beam.

Browser Support

Uses CSS masks with compositing, color-mix(), background-blend-mode, conic gradients and a hue-rotate() filter: current Chrome, Edge, Firefox and Safari 16.2+. The beam angle is written by the script every frame, so the orbit does not depend on @property support.

Dependencies

Required:

  • GSAP 3.12+ (core only, no plugins). The demo is built against 3.15.0.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.