Gerador de Sprites CSS Online Grátis — Combine Imagens e Gere CSS Automaticamente
Crie folhas de sprites CSS otimizadas a partir de várias imagens com nosso gerador de sprites online gratuito. Envie seus ícones ou imagens, escolha uma direção de layout (horizontal, vertical ou grade), defina o espaçamento e obtenha instantaneamente uma folha de sprites combinada e o código CSS exato com as posições de fundo corretas. Os sprites CSS reduzem as solicitações HTTP ao agrupar muitas imagens pequenas em uma, melhorando a velocidade de carregamento do seu site. Perfeito para conjuntos de ícones, elementos de UI e estados de botões. Todo o processamento acontece localmente no seu navegador.
Envie várias imagens (ícones, botões ou elementos de UI) para combinar em uma única folha de sprites.
Escolha uma direção de layout (horizontal, vertical ou grade) e ajuste o espaçamento entre as imagens.
Pré-visualize a folha de sprites, copie o código CSS gerado e baixe a imagem do sprite.
Dicas para Criar Sprites CSS
- Use imagens de tamanho semelhante para melhores resultados. Grandes diferenças de tamanho podem tornar o posicionamento menos previsível.
- O layout em grade é ideal para conjuntos de ícones com tamanhos uniformes. O horizontal funciona bem para estados de botões e itens de navegação.
- Mantenha um espaçamento de pelo menos 2-4px entre as imagens para evitar sobreposição visual ao usar o sprite em produção.
Perguntas Frequentes — Gerador de Sprites CSS
O que é um sprite CSS?
Um sprite CSS é um único arquivo de imagem que combina várias imagens menores (ícones, botões, etc.) em uma só. Usando background-position do CSS, você exibe apenas a parte da folha de sprites que precisa. Isso reduz as solicitações HTTP e melhora a velocidade de carregamento da página.
O gerador de sprites CSS é gratuito?
Sim, completamente gratuito. Sem registro, sem cobranças ocultas e sem marcas d'água. Todo o processamento acontece localmente no seu navegador.
Quais formatos de imagem são suportados?
A ferramenta suporta todos os formatos de imagem comuns, incluindo JPG, PNG, WebP, GIF, BMP, AVIF, SVG e mais. O PNG é recomendado para sprites para preservar a transparência.
Como uso o código CSS gerado?
Copie o código CSS e cole-o em sua folha de estilos. Coloque a imagem do sprite baixada na pasta de ativos do seu projeto e atualize o caminho da URL da background-image para corresponder à estrutura do seu projeto.
Qual layout devo escolher?
O layout horizontal coloca as imagens em uma linha — ideal para estados de botões e itens de navegação. O layout vertical as empilha — ótimo para menus suspensos e listas. O layout em grade as organiza em uma grade compacta — melhor para conjuntos de ícones com tamanhos uniformes.
A ferramenta suporta imagens de alta DPI (Retina)?
A ferramenta preserva as dimensões originais da sua imagem. Para suporte a Retina, envie imagens em tamanho 2× e use background-size no CSS para dimensioná-las em sua folha de estilos.
Posso reordenar as imagens no sprite?
As imagens são organizadas na ordem em que você as envia. Para alterar a ordem, basta remover e reenviá-las na ordem desejada.