img2css - GitLite

KO | EN

gitlite — search

#python #ai #typescript #llm #golang #go #machine-learning #linux #nodejs #windows #awesome-list #vue #pytorch #openai

img2css

(★ 2,498)

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

File Explorer

Download Latest Version (.zip)

- - deploy.yml
- screenshot.jpg
- thumbnail.jpg
- img2css.jpg
- app.jsx
- index.jsx
.editorconfig
.eslintrc.js
.gitignore
.nvmrc
.prettierrc
CHANGELOG.md
index.html
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
vite.config.js

# Installation Guide

1. Get the code

git clone https://github.com/javierbyte/img2css

Downloads the entire project code from GitHub to your computer.

cd img2css

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm run dev

Starts the development/run server.

npm run build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [img2css](https://javier.xyz/img2css)

Convert any image to pure CSS.

[![img2css](https://raw.githubusercontent.com/javierbyte/img2css/main/public/img2css.jpg)](https://javier.xyz/img2css)

- 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

## How does it work?

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 `<img>` tag using base64, so no need external hosting is needed.

### Development

Run development server:

```
npm run dev
```

Build

```
npm run build
```