I

img2css

Open source

Convert any image to pure CSS. Recreates images using only box-shadows.

2.5K stars0 likes0 views

About

Convert any image to pure CSS. Recreates images using only box-shadows.

Convert any image to pure CSS.

To use it go to https://javier.xyz/img2css
Looking for a programmatic way to do this? See https://github.com/javierbyte/canvas-image-utils
I also made a per-pixel animation experiment, see https://github.com/javierbyte/morphin

It has two different outputs, pure css shadow matrix [1] and base64 embedded image [2].

Pure CSS: This output was created by resizing and setting each pixel as a box-shadow of a single pixel div, so no img tag or background-image is needed. This can result in huge outputs, and the use of this output is not recommended for production unless there is no other option.
Base64: The entire image file is embedded inside the `` tag using base64, so no need external hosting is needed.

pnpm install
pnpm dev

pnpm build writes the static site to out/. Pushing to main deploys it to the gh-pages branch, which javier.xyz/img2css serves.

No open issues yet, or sync has not completed.

JavaScriptcssdesigndesign-toolfrontend