# img2css

**Repository Path**: mirrors/img2css

## Basic Information

- **Project Name**: img2css
- **Description**: Img2css 是一个可以将任何图像转换成 CSS 格式的工具
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: main
- **Homepage**: https://www.oschina.net/p/img2css
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-13
- **Last Updated**: 2026-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

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

### Development

Run development server:

```
npm run dev
```

Build

```
npm run build
```