Skip to content
Convert any image to pure CSS.
JavaScript HTML CSS
Branch: gh-pages
Clone or download

Latest commit

javierbyte Merge pull request #17 from prashantghimire/fix/read-me
improved the read-me description
Latest commit 9aeba16 Jun 9, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs-assets
src
static
styles
webpack
.babelrc
.gitignore
README.md
index.html
package-lock.json
package.json

README.md

img2css

Convert any image to pure CSS.

Live demo

img2css

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!

Why?

Hum... to demonstrate the power of CSS!

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

I made another proof-of-concept using pixel-level animations here http://javier.xyz/morphin/

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 http://javier.xyz/morphin/
  • Add scale options to better support pixel art.
  • Support for custom image filters.

Development

Run development server:

npm start

Build

npm run build
You can’t perform that action at this time.