https://github.com/javierbyte/img2css

Convert any image to pure CSS. Recreates images using only box-shadows.
https://github.com/javierbyte/img2css

css design design-tool frontend img2css javascript pixel-art react

Last synced: 23 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/javierbyte/img2css
• Owner: javierbyte
• License: bsd-3-clause
• Created: 2015-10-16T08:10:06.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2023-04-20T08:37:06.000Z (about 1 year ago)
• Last Synced: 2024-03-03T08:33:49.263Z (4 months ago)
• Topics: css, design, design-tool, frontend, img2css, javascript, pixel-art, react
• Language: JavaScript
• Homepage: https://javier.xyz/img2css/
• Size: 5.89 MB
• Stars: 2,470
• Watchers: 64
• Forks: 197
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-stars - javierbyte/img2css - shadows. (JavaScript)
• awesome-stars - img2css - shadows. | javierbyte | 2409 | (JavaScript)
• awesome-stars - javierbyte/img2css - Convert any image to pure CSS. Recreates images using only box-shadows. (JavaScript)
• fuck-awesome-stars - javierbyte/img2css - Convert any image to pure CSS. Recreates images using only box-shadows. (JavaScript)
• docsify-awesome-stars - javierbyte/img2css - Convert any image to pure CSS. Recreates images using only box-shadows. (JavaScript)
• awesome-stars - javierbyte/img2css - Convert any image to pure CSS. Recreates images using only box-shadows. (JavaScript)
• awesome-stars - javierbyte/img2css - `★2472` Convert any image to pure CSS. Recreates images using only box-shadows. (JavaScript)

README

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

Convert any image to pure CSS.

[![img2css](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 `` tag using base64, so no need external hosting is needed.

### Development

Run development server:

```

npm run dev

```

Build

```

npm run build

```