← All elements
<div class="px"></div>About this animation
A pixel-art heart drawn on a single element with many box-shadow values, one per pixel, no images required.
How it works
The heart is one 10 pixel square with a long list of box-shadow values. Each shadow has no blur and is offset by a multiple of ten pixels, so every shadow becomes one more square of the same colour. Together the squares form the pixel art picture, and a small scale animation makes it beat.
Ways to customise it
- Change #fb7185 everywhere to recolour the heart.
- Add or remove shadow offsets to edit the picture.
- Change the 1.2s animation for a faster heartbeat.
Good to know
It is decorative and has no meaning for screen readers. Large box-shadow lists are cheap for small images. The animation is turned off for reduced motion.
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.