Free CSS Sprite Generator

O que é

Editor local de pixel art com pincel/borracha e um CLI que converte imagens em sprites CSS puros baseados em box-shadow: sem raster, sem <canvas>, sem SVG. O resultado é uma classe CSS pronta para uso, recolorável via custom properties e diffável como texto no git.

Por que existe

Nasceu como infraestrutura de apoio a The Best Hot Dog, uma peça de arte 100% em CSS submetida a um desafio da comunidade DEV. O volume final de pixel art chegou a cerca de 121 mil linhas de SCSS, algo inviável de escrever à mão. Este gerador existe justamente para tornar esse volume possível: desenhar ou importar uma imagem e gerar o CSS automaticamente.

Como funciona

Um div de 1x1px escalado via transform: scale() vira um bloco de pixel; cada pixel colorido do sprite vira uma entrada de box-shadow empilhada no mesmo div, centenas ou milhares delas, sempre geradas, nunca escritas manualmente. A conversão de imagem usa sharp para reamostrar em nearest-neighbor e reduzir cores perceptualmente (conversão para CIE Lab e distância Delta-E, em vez de distância RGB crua) até caber na paleta configurada.

Arquitetura

Três pontos de entrada (editor interativo, CLI de conversão de imagem, e o build que compila para SCSS) compartilham a mesma biblioteca central de manipulação de grid de pixels, para evitar reimplementação divergente entre eles. Sem framework, sem bundler para o app em si: JavaScript, CSS e HTML vanilla servidos por um servidor node:http simples.

Galeria