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.
Comments
0 people shared their preference · Deer Point appears after 10 participants
Sign in to join the discussion.