JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Convert any image to pure CSS.

Live demo


How does it works?

Well, it just puts the image in a canvas, calculates an array with the rgb values, and then... creates a single pixel shadow for each value!


Hum... to demonstrate the power of CSS!

And this may have other interesting properties, like creating loading screens with pixel art or pixel-level animation.

I made anotehr proof-of-concept using pixel-level animatinos here

Planned features

  • Make the result smaller with smarter shadows and common background detection.
  • Make animation and image morphing by using css transitions on the shadows. See
  • Add scale options to better suport pixel art.
  • Support for custom image filters.


Run development server:

npm start


npm run build