Glow Pulse
Indigo-violet halo that pulses continuously around a card — 100% CSS, no JavaScript, to spotlight a key element on a dark background.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Cards has 43 effects, including 6 free. Explore the category →
3 usage examples
How it works
The animation relies on a single @keyframes glowPulse that oscillates the box-shadow property between two states: at rest (0% and 100%), a subtle 20 px halo at rgba(99, 102, 241, .2); at peak (50%), two layered glows — an inner 40 px halo at rgba(99, 102, 241, .4) and an outer diffusion ring at 60 px in rgba(139, 92, 246, .2). The ease-in-out timing produces an organic breathing rhythm with no harsh transitions.
The .card-glow class binds the animation at a fixed 2-second duration, looping infinitely. A border: 1px solid rgba(99, 102, 241, .3) outlines the card edge and anchors the indigo hue at rest and in motion. The two colors — indigo #6366f1 (main halo) and violet #8b5cf6 (diffusion ring) — form a consistent cool-spectrum palette recognized as a premium tech aesthetic.
Two CSS custom properties on :root allow customization without touching the animation: --bg-card controls the card background (default: #12121a) and --radius-xl its corner radius (default: 1rem). The effect is entirely CSS — no JavaScript is involved, and no runtime is executing in the background.
Accessibility
- prefers-reduced-motion absent from the code — the animation loops unconditionally, even when the OS signals a preference to reduce motion. Recommended fix: add
@media (prefers-reduced-motion: reduce) { .card-glow { animation: none; } }. - Text contrast WCAG AA: white (
#ffffff) on near-black (#12121a), ratio ≥ 15:1 — well above the threshold. - The
.card-democard is a<div>withcursor: pointerbut norole="button"ortabindex="0"— not focusable or keyboard-activatable if made interactive. - No
aria-hiddenorroleattributes are present in the base structure; add them if the effect is purely decorative within an existing semantic context. - The effect draws attention through luminosity variation (not color alone), making it perceptible to colorblind users.
Browser compatibility
Relies on CSS Animations and box-shadow — supported in all modern browsers since 2012. Zero JavaScript dependencies.
Without CSS Animations support (IE 10 and below), the card renders with its dark background and indigo border without pulsing — no JS errors, the page remains functional.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<!-- Centered wrapper provided by the effect -->
<!-- card-demo: background, dimensions, radius -->
<!-- card-glow: pulsing halo (border + animation) -->
<div class="card-demo card-glow">
Your content
</div>
<!-- card-glow can also be applied directly -->
<!-- to your own elements (div, section, article…) -->
</div>The full HTML + CSS + JS of Glow Pulse, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| --bg-card | #12121a | Card background color (CSS :root variable). Swap for your dark brand color or transparent to inherit from a parent. |
| --radius-xl | 1rem | Corner radius (CSS :root variable). 0 for sharp corners, 50% on a square for a circle. |
| animation-duration on .card-glow | 2s | Pulse rhythm. 1.2 s = crisp alert, 3 s = slow and calming breath. |
| Main color in @keyframes glowPulse | rgba(99, 102, 241, ...) | Indigo tint of the inner and outer halos. Replace the RGB values with your palette (green, cyan, amber…). |
| Outer ring at 50%: rgba(139, 92, 246, .2) 0 0 60px | diffuse violet | Second diffusion layer at mid-animation. Remove it for a single-color halo, or increase to .4 for a more dramatic glow. |
| Rest / peak opacity in @keyframes | .2 → .4 | Pulse contrast. Raise peak to .7 for an intense glow, lower rest to .05 for a very discreet presence. |
| Halo spread in @keyframes (50%) | 0 0 40px / 0 0 60px | Light diffusion distance. 0 0 80px for a wide airy aura, 0 0 16px for a tight luminous outline. |
FAQ
@keyframes glowPulse and the animation property on .card-glow. Copy the CSS, add the class to your element, and you're done. Compatible with React, Vue, Angular, and Svelte — no JS runtime involved; the class can be applied to any HTML element.rgba() values directly in @keyframes glowPulse and on the border in .card-glow. For an emerald green glow: replace rgba(99, 102, 241, ...) with rgba(16, 185, 129, ...) and rgba(139, 92, 246, ...) with rgba(5, 150, 105, ...). There is no dedicated CSS variable for color in the base version — direct keyframe editing is intentional to keep the code minimal.infinite with 1 in the animation property on .card-glow — the animation runs once and stops. To re-trigger on an event (click, form submit…), remove the card-glow class, force a reflow via element.getBoundingClientRect(), then add it back — the browser restarts the animation from the beginning.
