pulse notification badge indicator subtle pulsing notification badge status indicator for live or active items subtle attention draw for new content Tailwind animate-pulse is too aggressive for subtle indicators need gentle pulsing without scale or color change notification dot needs attention without being distracting
Subtle Pulse
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/pulse-subtle.json Hello, World
This element animates in
Background
Customize
Quick Start
<span class="animate-pulse-subtle inline-block h-2 w-2 rounded-full bg-red-500"></span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 364 bytes · 21 lines
- Custom Properties
-
--pulse-duration--pulse-min-opacity - Classes
-
.animate-pulse-subtle
pulse notification badge indicator subtle
Apply .animate-pulse-subtle for a gentle opacity pulse. Unlike Tailwind’s animate-pulse (which uses scale), this only animates opacity for a less aggressive effect.
Customize via CSS custom properties:
--pulse-duration— animation cycle duration (default:2s)--pulse-min-opacity— lowest opacity point (default:0.7)
Animation is disabled when the user prefers reduced motion.