Pixel Art to CSS is a browser-based drawing and animation editor for anyone who wants pixel art delivered as ready-to-paste CSS rather than as a flat image file.

What it is

Pixel Art to CSS is an online editor built as a JavaScript web application, combining React for the UI, Redux for a Flux-like architecture, ImmutableJS to keep application data free of side effects, and PostCSS to handle its own styles. It is aimed at people who draw frames of pixel art and want the result expressed as code they can drop into a website, and it ships as a hosted site at pixelartcss.com as well as a codebase you can install and run yourself.

The concrete problem it addresses is that pixel art normally has to be shipped as an image asset — a static file, a GIF, or a sprite sheet — which is awkward when what you actually want is markup that inherits your page's styling. The app closes that gap by generating CSS that combines the box-shadow and keyframes properties, so the drawing and its animation are expressed entirely in stylesheets. It therefore stands in for hand-writing those two properties frame by frame, and for the round-trip of exporting images just to place a small animated graphic on a page.

Key capabilities

• Generates CSS from pixel art by combining box-shadow and keyframes, producing code ready to paste into a site.
• Exports finished work as a static image, an animated GIF, or a sprite-like image.
• Lets you customise the colour palette, move back and forth in time along the animation, and modify animation settings.
• Saves and loads projects, and imports work by submitting text code — the bundled cat animation is shipped as examples/import-export/cat.txt.
• Ships an example project (a cat animation, visible as screenshots/animation-cat.gif) loaded by default in the LOAD section.
• Provides separate maintenance scripts: npm run lint (ESLint), npm run csslint (Stylelint), npm run format (Prettier), and npm run test (Jest).
• Runs the linters and formats staged files automatically on every commit.

Who uses it and how

• Front-end developers who need a small animated graphic on a page and prefer shipping CSS over committing image assets to a repository.
• Designers sketching sprite-style animations in the browser, then exporting the same work as a GIF or sprite image for contexts where CSS does not apply.
• Self-hosters and contributors who clone the repository, install dependencies with npm install, and work against the development script or the production build.
• Teams relying on the included test and lint tooling, where Jest tests and the ESLint/Stylelint/Prettier suite gate commits.

Getting started

Install with npm install and run the app locally with npm run development; the production build is created with npm run deploy.

How it compares

This registry names no comparable or competing projects alongside it, so Pixel Art to CSS stands alone here as the sole entry for turning pixel art drawings into CSS code.

When to use it — and when not

Pick it when you want a lightweight, MIT-licensed drawing tool whose output is CSS you own and can paste anywhere, and when you are content to operate a Node/npm build pipeline for local use — the app is a client-side React project rather than a service with a database, storage or SMTP to administer. Do not pick it if you need a maintained dependency: the README warns that the repository is in a temporary idle state for a refactor and tech upgrade, and is not currently accepting new pull requests or issues, which also means feature requests and fixes will sit unaddressed until that ends.

npm install

npm run development

npm run deploy

npm run lint
npm run csslint
npm run format

npm run test