← All elements
<div class="pr"><span class="bell">🔔</span><i class="dot"></i></div>About this animation
A notification dot with expanding rings that fade out, made with two pseudo-elements and an offset animation.
How it works
A small red dot has two pseudo-elements of the same size and colour. Both run the same keyframe that scales them from 1 to about 3.4 times while their opacity drops from 0.7 to zero, so they grow outward and fade like a ripple. The second one starts half a cycle later, which keeps a ring on screen at all times.
Ways to customise it
- Change #ef4444 to recolour the dot and rings.
- Edit the scale of 3.4 for bigger rings.
- Change the 1.8s duration to pulse faster.
Good to know
Pulsing badges draw attention, so use them sparingly. They are decorative and the rings stop under reduced motion. Add a real text alternative for the unread count.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.