glow pulse box-shadow status cta glowing CTA button to draw attention pulsing status indicator for active states ambient glow effect for featured elements need animated glow without neon intensity want pulsing shadow that matches brand color status element needs subtle attention draw
Pulse Glow
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/pulse-glow.json Preview
Background
Customize
Quick Start
<button class="pulse-glow" style="--glow-color: oklch(0.7 0.2 150)">Active</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 644 bytes · 25 lines
- Custom Properties
-
--glow-color--glow-size--glow-duration - Classes
-
.pulse-glow
glow pulse box-shadow status cta
Apply .pulse-glow to any element. Creates a pulsing box-shadow glow that expands and contracts.
Customize via CSS custom properties:
--glow-color— glow color in OKLCH (default: blue)--glow-size— base glow radius (default:20px)--glow-duration— pulse cycle (default:2s)
Uses relative OKLCH color syntax (oklch(from ...)) for dynamic opacity on the glow color. Falls back to a static glow when reduced motion is preferred.