Instant CSS
Tools
Templates
Components
Learn
More
Pulse Ring
Animation
An expanding ring effect for status indicators.
Reset to Default
HTML
Copy HTML
<div class="pulse-ring"></div>
CSS
Copy CSS
.pulse-ring { width: 20px; height: 20px; border-radius: 50%; background: #3b82f6; position: relative; } .pulse-ring::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); animation: pulse-ring 1.5s infinite cubic-bezier(0.66, 0, 0, 1); } @keyframes pulse-ring { to { box-shadow: 0 0 0 20px rgba(59, 130, 246, 0); } }
Live Preview
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.