---
name: hover-glow-card
description: Use when you want "Modern, premium, techy" - Adds glow or light bloom around a card on hover.
---

# Hover Glow Card

> **Category:** Card / Layout  -  **Personality:** Modern, premium, techy
>
> **Best use:** Feature cards, dark UI
>
> **Ratings:** Professional 4/5 - Casual 3/5 - Exotic 4/5 - Visual impact 4/5 - Difficulty 2/5 - Performance cost 2/5

## What it is

A card that "blooms" on hover: it lifts off the page, its border lights up in an accent colour, and a soft coloured glow swells out from behind it (a real light bleed, not just a bigger shadow). It is the calm, premium way to signal interactivity on a dark feature grid. Unlike a Spotlight Card it does **not** track the cursor — the whole card reacts uniformly, so it works identically on hover, keyboard focus, and touch, and stays pure CSS.

## Dependencies / CDN

None - pure CSS. The demo only loads display/body fonts (optional):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
```

## HTML

Each card carries its own accent as `--g` = `"R,G,B"` (comma-separated channels, not a hex). Make the card itself the link so the whole surface is hoverable **and** keyboard-focusable.

```html
<div class="hgc-grid">
  <a class="hgc-card" href="#" style="--g:34,211,238">
    <div class="hgc-top">
      <span class="hgc-ico">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M13 2 5 13h6l-1 9 9-12h-6l0-8Z"/>
        </svg>
      </span>
      <span class="hgc-badge">41 REGIONS</span>
    </div>
    <h3 class="hgc-name">Realtime Edge Functions</h3>
    <p class="hgc-desc">Deploy once and run in 200&nbsp;ms from the node nearest every visitor.</p>
    <span class="hgc-more">Explore runtime <span class="arw">&rarr;</span></span>
  </a>
  <!-- repeat with style="--g:168,85,247" / "--g:52,211,153" … -->
</div>
```

## CSS

The whole effect is the four `.hgc-card` rules below (idle, the blurred `::after` halo, the hover/focus state, and reduced-motion). Everything else is dressing.

```css
.hgc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:820px){ .hgc-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .hgc-grid{ grid-template-columns:1fr; } }

/* idle card */
.hgc-card{
  position:relative; display:flex; flex-direction:column; gap:13px;
  padding:24px 22px; border-radius:20px; color:#e7ebf3; text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -22px rgba(0,0,0,.9);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1),
             border-color .5s, background .5s;
  will-change:transform;
}

/* THE BLOOM — a blurred radial halo pinned BEHIND the card */
.hgc-card::after{
  content:""; position:absolute; inset:-22px; z-index:-1; border-radius:30px;
  background:radial-gradient(52% 50% at 50% 46%, rgba(var(--g),.55), rgba(var(--g),0) 72%);
  opacity:0; transform:scale(.82); filter:blur(20px);
  transition:opacity .5s, transform .5s;
}

/* hover / keyboard focus: lift + light up the border + grow the coloured glow */
.hgc-card:hover, .hgc-card:focus-visible{
  transform:translateY(-10px); outline:none; text-decoration:none;
  border-color:rgba(var(--g),.5);
  background:linear-gradient(180deg, rgba(var(--g),.12), rgba(255,255,255,.02));
  box-shadow:0 30px 66px -26px rgba(var(--g),.7),   /* big coloured drop-glow */
             0 0 0 1px rgba(var(--g),.32),          /* crisp accent ring     */
             inset 0 1px 0 rgba(255,255,255,.14);
}
.hgc-card:hover::after, .hgc-card:focus-visible::after{ opacity:.95; transform:scale(1); }

/* icon tile also brightens (optional flourish) */
.hgc-ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#06101a;
  background:linear-gradient(140deg, rgba(var(--g),.95), rgba(var(--g),.5));
  box-shadow:0 6px 18px -7px rgba(var(--g),.7), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .5s, box-shadow .5s;
}
.hgc-card:hover .hgc-ico{ transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 26px -7px rgba(var(--g),.95), 0 0 24px rgba(var(--g),.5), inset 0 1px 0 rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce){
  .hgc-card{ transition:box-shadow .12s, border-color .12s, background .12s; }
  .hgc-card:hover, .hgc-card:focus-visible{ transform:none; }        /* keep the glow, drop the lift */
  .hgc-card::after{ transition:opacity .12s; }
  .hgc-card:hover::after, .hgc-card:focus-visible::after{ transform:scale(1); }
}
```

## JavaScript

Not required.

## How it works

- **One accent variable drives everything.** `--g` holds the colour as raw channels (`34,211,238`), so the same value feeds `rgb(var(--g))` for solid text/borders and `rgba(var(--g),.x)` for every translucent glow layer. Change one inline value and the whole card re-themes.
- **The glow is two stacked layers.** A transitioned `box-shadow` gives a tight coloured drop-glow + a 1px ring, while a separate blurred `::after` radial gradient (pinned `inset:-22px`, `z-index:-1`) provides the wide ambient *bloom* that bleeds past the card edges. On hover it fades from `opacity:0` and scales `.82 → 1`.
- **The lift** is just `transform:translateY(-10px)` with a `cubic-bezier(.22,1,.36,1)` ease so it "settles" rather than snapping.
- **`:hover` and `:focus-visible` share one rule**, so the bloom is identical for mouse and keyboard users.
- Only `transform`, `opacity`, `box-shadow`, `background` and `border-color` animate — all cheap, compositor-friendly properties.

## Customization

- **Glow strength:** the spread/alpha of the first `box-shadow` (`-26px` spread, `.7` alpha) and the `::after` blur (`20px`). More alpha = hotter.
- **Bloom shape:** widen `::after` `inset` and the radial stops (`72%`) for a larger, softer halo; tighten them for a focused rim.
- **Lift amount:** `translateY(-10px)` — drop to `-6px` for subtle, `-14px` for dramatic.
- **Accent per card:** set `style="--g:R,G,B"` (e.g. `168,85,247` violet, `52,211,153` emerald). One palette, many cards.
- **Light theme:** the bloom needs a dark backdrop. On light surfaces, raise the card background opacity and cut the glow alphas roughly in half.

## Accessibility & performance

- **Keyboard-equal:** because the card is an `<a>` and the rule targets `:focus-visible` too, tabbing to a card blooms it exactly like hovering — the glow + ring double as a visible focus indicator (we drop the default `outline`, so keep that ring).
- **Reduced motion:** under `prefers-reduced-motion` the colour glow still appears (useful affordance) but the lift and scale are removed, so nothing jumps.
- **Cheap to run:** no layout thrash — only transform/opacity/shadow animate. Avoid animating `filter: blur()` radius (expensive); animate the pseudo-element's `opacity`/`transform` instead, as here.
- **Contrast:** keep body text near-white; the on-hover accent wash is kept low (`.12`) so text stays legible.

## Gotchas

- **`--g` is channels, not hex.** `rgb(var(--g))` only works if `--g` is `34,211,238`. A hex value will break every glow.
- **`<a>` cards get underlined on hover** by any global `a:hover{text-decoration:underline}`. Re-assert `text-decoration:none` on `.hgc-card:hover, .hgc-card:focus-visible` (higher specificity wins) — this demo does exactly that.
- **The bloom paints over the card background, not just behind it.** The card builds its own stacking context (via `will-change`/`transform`), so a `z-index:-1` pseudo sits above the card's *background* but below its content. Keep the card background fairly opaque and rely on the `inset:-22px` overhang to read as an *outer* halo; if you want zero interior tint, move the bloom to a sibling element placed before the card instead.
- **Give the stage breathing room.** A soft 60-70px glow will be hard-clipped if the container has tight padding + `overflow:hidden`; pad generously so it fades out cleanly (and never causes a horizontal scrollbar).
- **Needs a dark, slightly varied backdrop.** On a flat light background the bloom is invisible — this effect lives in dark UI.