OneTaskBy Tim King · Updated
CSS Heartbeat Animation
Beating Heart Shape in Pure CSS, Double Pulse at Any Rate
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 Heartbeat Animation works
This CSS heartbeat animation generator draws a heart from a single element and makes it beat with the double thump of a real heartbeat. Set the size, beats per minute, beat strength and colour, then copy the HTML and CSS.
A beating heart suits like buttons, charity pages, health apps and Valentine banners.
How the CSS heartbeat animation works
The heart is one square rotated 45 degrees with two circles attached by ::before and ::after.
The keyframe scales it up, back slightly below normal and up again, then rests for the remainder of
the beat. The loop length is 60 divided by the beats per minute, so 72 BPM gives a beat every 0.83
seconds.
Choosing a rate
Around 60 to 80 beats per minute looks calm and natural. Faster rates feel excited or anxious, which can suit a countdown or a game, while very slow beats feel sleepy.
FAQ
How do I make a CSS heart shape without the animation?
Copy the code and delete the animation line. The heart is built from one element and two pseudo-elements, so it scales cleanly to any size and takes any colour without an image or icon font.
Why does the heart beat twice each loop?
A real heartbeat has two close beats followed by a pause. The keyframe imitates this with two scale peaks near the start of each loop, which reads as a heartbeat rather than a simple pulse.
Does the heart keep beating for reduced motion users?
No. The copied CSS includes a prefers-reduced-motion rule that stops the animation, so visitors who ask for less motion see a still heart at its normal size.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
CSS Pulse Animation
A pulsing ring around a button or a live status dot.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
CSS Bounce Animation
A bouncing ball with optional squash and stretch.
Loading Spinner
Design a CSS loading spinner and copy the code.