About this project

img2css is a web tool that converts an image into pure CSS. Its main technique recreates the picture using only box-shadows: each pixel is resized and set as a box-shadow of a single-pixel div, so no img tag or background-image is required. The project notes that this output can become very large and is not recommended for production unless no other option exists. A second output mode embeds the entire image file inside an img tag using base64, removing the need for external hosting. The tool is available through a hosted web page. The README also points to a related programmatic library (canvas-image-utils) for those who want to perform the conversion in code, and to a separate per-pixel animation experiment (morphin). Development uses pnpm: pnpm install and pnpm dev for local work, while pnpm build writes the static site to an out/ directory. Pushing to the main branch deploys the site to a gh-pages branch.