Gerador de sprites CSS
Organize as imagens e confira a prévia. O CSS gerado dá a cada imagem o próprio tamanho e a posição de fundo na folha, e o ZIP traz o PNG e a folha de estilos juntos.
Funciona localmente no seu navegador · PNG · CSS · ZIP
Organize as imagens e confira a prévia. O CSS gerado dá a cada imagem o próprio tamanho e a posição de fundo na folha, e o ZIP traz o PNG e a folha de estilos juntos.
Funciona localmente no seu navegadorO gerador desenha as imagens escolhidas em um PNG transparente e escreve o CSS que recoloca cada imagem na tela com background-position. O canvas monta a folha e o JSZip prepara o arquivo, tudo dentro da página: nada é enviado.
Cada célula tem a largura e a altura da maior imagem da seleção, e cada imagem é centralizada na própria célula. As regras mantêm o tamanho original de cada imagem: um ícone de 16 × 16 e uma faixa de 64 × 4 dividem a mesma folha sem serem redimensionados.
O arquivo abre com uma classe base — .sprite-<prefixo> com display: inline-block, background-image: url("voritools-sprite.png") e background-repeat: no-repeat — seguida de uma regra por imagem: .<prefixo>-<nome> com largura, altura e background-position negativa dentro da folha.
O prefixo e os nomes de arquivo passam pela mesma normalização: minúsculas, sequências de outros caracteres viram um hífen e os hífens das pontas saem. my icon.png vira my-icon, um nome repetido recebe -2 e -3, e um prefixo que fica vazio volta para icon, para a classe base e as regras combinarem.
Cada execução aceita no máximo 50 arquivos e 250 MB de entrada, e o canvas não pode passar de 16384 pixels por lado nem de 32.000.000 pixels no total. Uma folha maior para com “A tela gerada é grande demais para processamento confiável no navegador.” e não exporta nada.
O 51º arquivo não é descartado em silêncio: a linha de status informa quantos ficaram fora do limite e a lista mantém os 50 primeiros. Colunas e Espaçamento são arredondados para pixels inteiros antes do uso — 2,5 vira 3 colunas — e o campo mostra o valor aplicado.
Tudo roda no navegador. Adicionar imagens, gerar, copiar o CSS, baixar o ZIP e limpar a lista não enviaram nenhuma requisição de rede no teste (en, fr e ja) depois que a página carregou, e as imagens não saem do dispositivo.
A folha é desenhada com o decodificador do próprio navegador, então PNG, JPEG e SVG carregam como em qualquer outra página; um arquivo truncado ou vazio é recusado com “Este navegador não consegue decodificar esse formato de arquivo.” Um SVG sem width e height é desenhado no tamanho padrão do navegador, 300 × 150.