Pulse Ring
An expanding box-shadow ring creates a pulse halo.
Preview
Tune parameters
Full code
/* Pulse Ring */
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); }
70% { box-shadow: 0 0 0 16px rgba(37,99,235,0); }
100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.pulse-ring { animation: pulseRing 1.6s ease-out infinite; }