Glow — `.mv-glow`

Blurred gradient backlight behind any element, plus a neon card with a gradient border, static or slowly rotating.

Category	Effects
Type	CSS only (`.mv-glow`)
Status	stable
Keywords	glow, backlight, neon, halo, gradient, blur, cta

When to use

A primary CTA, pricing card or product shot needs a colored backlight to stand out on a dark page
A highlighted card should be framed by a neon gradient ring with a halo, static or slowly rotating
A key element needs a halo that also intensifies on hover and keyboard focus

Avoid when

The emphasis should be light traveling along the border rather than a static halo → use Border Beam instead
The light should follow the cursor inside a card or across a grid → use Spotlight Card instead
Every card on the page would get a halo, so nothing stands out anymore

Install

node scripts/add.mjs glow --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["glow"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/glow/glow.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:center;align-items:center;width:100%;padding:1rem 0">
  <div class="mv-glow" data-variant="soft" data-animate style="width:min(100%,17rem)">
    <article class="mv-card">
      <header class="mv-card-header">
        <h3 class="mv-card-title">Creator plan</h3>
        <p class="mv-card-description">Soft, animated backlight</p>
      </header>
      <div class="mv-card-content">
        <div class="mv-card-stat">$19<span style="font-size:.9rem;font-weight:500;color:var(--mv-fg-muted)"> / month</span></div>
        <p style="margin:.5rem 0 0;color:var(--mv-fg-muted)">Custom domain, analytics, 100 GB of storage.</p>
      </div>
      <footer class="mv-card-footer"><button class="mv-button" style="width:100%">Choose this plan</button></footer>
    </article>
  </div>

  <div class="mv-glow" data-variant="neon" data-animate style="width:min(100%,17rem)">
    <article class="mv-card">
      <header class="mv-card-header">
        <h3 class="mv-card-title">Neon card</h3>
        <p class="mv-card-description">Gradient border and halo</p>
      </header>
      <div class="mv-card-content">
        <p style="margin:0;color:var(--mv-fg-muted)">Highlight the recommended plan or the latest announcement without cluttering the page.</p>
      </div>
      <footer class="mv-card-footer"><button class="mv-button" data-variant="outline" style="width:100%">Learn more</button></footer>
    </article>
  </div>

  <div style="display:grid;gap:1.5rem;justify-items:center">
    <span class="mv-glow" style="--mv-glow-radius:var(--mv-radius-full)">
      <button class="mv-button" data-shape="pill" data-size="lg">Join the waitlist</button>
    </span>
    <span class="mv-glow" style="--mv-glow-radius:var(--mv-radius-lg);--mv-glow-color-1:oklch(0.78 0.17 150);--mv-glow-color-2:oklch(0.82 0.14 200);--mv-glow-color-3:oklch(0.85 0.16 110)">
      <button class="mv-button" data-variant="outline" data-size="lg">Static glow, custom colors</button>
    </span>
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`data-variant`	soft \| neon	`(tight halo)`	soft: wide, diffuse halo shifted downward; neon: gradient ring (padding = thickness) + neon halo.
`data-animate`	boolean		Slow gradient rotation (disabled with reduced motion).

CSS classes

Name	Description
`mv-glow`	Wrapper (inline-grid) around the element to light up: the halo is painted behind the child, even when the child is opaque.

CSS variables

Name	Default	Description
`--mv-glow-color-1 / -2 / -3`	`accent / pink / cyan (neon: magenta / cyan)`	Gradient colors.
`--mv-glow-blur`	`1.75rem`	Halo blur.
`--mv-glow-spread`	`0.25rem`	Halo spread around the element (negative = tighter).
`--mv-glow-opacity`	`0.55`	Intensity; +0.3 on hover and focus.
`--mv-glow-radius`	`var(--mv-radius-xl)`	Radius (match it to the child).
`--mv-glow-border`	`2px`	Neon: ring thickness.
`--mv-glow-duration`	`8s`	Duration of one rotation (data-animate).

Accessibility

Purely decorative (content-less pseudo-elements). The halo also intensifies on keyboard focus. With reduced motion, rotation stops and the effect stays static.