Meus arquivos são carregados em um servidor?

Não. Tudo é executado no seu navegador usando a API de Canvas. Seus arquivos nunca saem do seu dispositivo.

Quantas imagens posso adicionar a uma folha de sprite?

Não há limite rígido — a ferramenta empacota tantas imagens quantas a memória do seu navegador permite. Para o melhor desempenho, mantenha os sprites individuais com tamanho razoável.

O que a configuração de largura máxima da linha faz?

Ela limita quão larga cada linha de sprites pode ficar antes que o empacotador comece uma nova linha. Um valor maior produz uma folha mais larga; um valor menor produz uma folha mais alta e estreita.

Posso usar o CSS gerado diretamente no meu projeto?

Sim. Cada classe de sprite inclui a URL do background-image (apontando para o PNG que você baixou), background-position, width e height — cole-a em qualquer folha de estilo e aplique a classe aos seus elementos HTML.

Quais formatos de imagem posso usar como sprites de entrada?

Qualquer formato que seu navegador possa decodificar — PNG, JPEG, WebP, GIF, SVG, AVIF e mais. A folha de sprite de saída sempre será um único PNG para máxima compatibilidade.

Esta ferramenta envia meus dados?

Não. Tudo é executado no seu navegador, então seus dados nunca saem do seu dispositivo — e funciona até offline depois que a página carrega.

🗂️ Gerador de Sprite Sheet

Empacote várias imagens em uma única folha de sprite PNG otimizada e obtenha regras de posição de fundo CSS prontas para uso — gratuito, no navegador, sem necessidade de upload.

🗂️

Solte as imagens aqui ou clique para selecionar várias

Empacotado em um PNG + CSS — no seu navegador, sem upload

Privado por design. Esta ferramenta funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado, e funciona offline.

Sobre

Esta ferramenta usa a API de Canvas do navegador para empacotar suas imagens em uma folha de sprite PNG compacta totalmente no seu dispositivo — nada é carregado em qualquer servidor. Solte as imagens que precisar, defina a largura máxima da linha e o preenchimento por sprite, e o empacotador as organizará linha por linha para minimizar o espaço desperdiçado. Depois de gerado, você pode baixar o PNG combinado e copiar o snippet CSS, que contém uma classe por sprite com os valores corretos de background-image, background-position, width e height prontos para colar no seu folha de estilo. Como tudo funciona localmente no seu navegador, o processo é instantâneo e totalmente privado.

Como usar

Solte suas imagens na área de upload ou clique para navegar e selecionar vários arquivos de uma vez.
Defina a largura máxima da linha (em pixels) e o preenchimento ao redor de cada sprite para controlar quão apertado eles são empacotados.
Clique em Gerar Folha de Sprite para empacotar todas as imagens em um PNG combinado, pré-visualizado instantaneamente no canvas.
Copie o CSS gerado — cada sprite recebe sua própria classe com os valores corretos de background-position, width e height.
Baixe a folha de sprite PNG e cole o CSS no seu folha de estilo do projeto — feito.

Perguntas frequentes

Meus arquivos são carregados em um servidor?: Não. Tudo é executado no seu navegador usando a API de Canvas. Seus arquivos nunca saem do seu dispositivo.
Quantas imagens posso adicionar a uma folha de sprite?: Não há limite rígido — a ferramenta empacota tantas imagens quantas a memória do seu navegador permite. Para o melhor desempenho, mantenha os sprites individuais com tamanho razoável.
O que a configuração de largura máxima da linha faz?: Ela limita quão larga cada linha de sprites pode ficar antes que o empacotador comece uma nova linha. Um valor maior produz uma folha mais larga; um valor menor produz uma folha mais alta e estreita.
Posso usar o CSS gerado diretamente no meu projeto?: Sim. Cada classe de sprite inclui a URL do background-image (apontando para o PNG que você baixou), background-position, width e height — cole-a em qualquer folha de estilo e aplique a classe aos seus elementos HTML.
Quais formatos de imagem posso usar como sprites de entrada?: Qualquer formato que seu navegador possa decodificar — PNG, JPEG, WebP, GIF, SVG, AVIF e mais. A folha de sprite de saída sempre será um único PNG para máxima compatibilidade.
Esta ferramenta envia meus dados?: Não. Tudo é executado no seu navegador, então seus dados nunca saem do seu dispositivo — e funciona até offline depois que a página carrega.