OneTaskBy Tim King · Updated
CSS Pulse Animation
Expanding Ring Pulse for Buttons and Live Status Dots, With Size, Colour and Speed
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the CSS Pulse Animation works
This CSS pulse animation generator adds a soft ring that grows out from a button or a small dot and fades away, again and again. Choose a button or a dot, set the colours, size and speed, then copy the HTML and CSS.
A pulsing dot is the familiar "live" or "online" indicator, and a pulsing button gently points visitors at the one action you want them to take.
How the CSS pulse animation works
The ring is a box-shadow that animates from zero spread to a wide spread while its colour fades to
transparent. Because box shadows do not take up space, the pulse never pushes nearby content around,
and the element itself stays still and readable.
Keeping it subtle
One pulsing element per screen is enough. A slower loop of around two seconds feels calm; anything faster than a second starts to feel urgent, which suits alerts but not ordinary buttons.
FAQ
How do I make a live status dot?
Choose Dot, pick a green fill and set the size to about 12 to 18 pixels. Place it next to a word such as "Live" and the ring pulses outwards to show the status is active.
Can I stop the pulse after a few loops?
Yes. Change infinite in the animation line to a number such as 3 and the pulse stops after three rings, leaving the button in its normal state.
Does the pulse respect reduced motion settings?
Yes. The copied CSS includes a prefers-reduced-motion rule that removes the pulse, so visitors who ask for less motion see a steady button or dot.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Ripple Effect
Material-style click ripple for buttons in pure CSS.
Glow Effect
Neon glow for headings and buttons, pure CSS.
CSS Button Generator
Design a button with hover, focus and disabled states.
CSS Heartbeat Animation
A pure CSS heart that beats at any rate you choose.
Loading Spinner
Design a CSS loading spinner and copy the code.