Instant CSS
Tools
Templates
Components
Tailwind Components
Animations
Learn
More
Pulse
Animation
A subtle heartbeat effect.
Reset to Default
HTML
Copy HTML
<div class="pulse-box">Pulse</div>
CSS
Copy CSS
.pulse-box { width: 100px; height: 100px; background-color: #ef4444; color: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: sans-serif; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
Live Preview
Pulse
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.