Gerador de Sprite Sheet de Imagens
Combina muitas imagens pequenas (ícones, estados UI, frames de personagem) em um PNG baixável e emite um bloco CSS que posiciona cada um por `background-position`. Reduz requisições HTTP quando uma fonte de ícones, um sprite SVG ou um pipeline real de sprite sheet não é uma opção. O layout é faixa horizontal, faixa vertical, ou uma grid de colunas fixas; a folha é dimensionada pra caber o maior item em cada linha ou coluna. Arquivos são processados inteiramente no lado do cliente via canvas — seus ícones nunca saem do navegador.
Como usar
- Solte ou escolha as imagens. Elas aparecem na ordem que o OS as entrega.
- Escolha layout: faixas horizontal/vertical são as mais simples, grid é mais densa. Configure padding pra evitar sangramento.
- Baixe o PNG, copie o CSS, envie-os juntos — combine o nome de classe que você colocou no prefixo CSS.
Perguntas frequentes
- Sprite sheets vs. sprites SVG vs. fontes de ícones?
- Sprites PNG ainda vencem quando a fonte é um raster real (arte de jogo, miniaturas de foto). Pra iconografia UI prefira sprites SVG (`<symbol>` + `<use>`) — escalam e respondem ao currentColor. Fontes de ícones agora são principalmente um fallback legado.
- O que acontece com a transparência?
- Se você mantém o fundo transparente, o PNG é salvo com alfa (o tabuleiro de xadrez que você vê na visualização é só pra tornar a área transparente visível). Se você escolhe branco ou preto, esses são assados na folha.
Ferramentas relacionadas
Efeito Duotone de Imagem
Aplique um efeito duotone de duas cores em qualquer imagem — escolha cor de sombra e cor de luz, ajuste midpoint e contraste, baixe o resultado. Capas estilo Spotify em dois cliques.
Desfoque de imagem
Aplica desfoque Gaussiano, caixa ou de movimento a qualquer imagem no seu navegador. Raio ajustável 0-64 px, com o filtro CSS equivalente pronto para copiar.
Playground de Filtros CSS
Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.
Imagem → ASCII Art
Converta qualquer imagem em ASCII art com largura, conjunto de caracteres e inversão ajustáveis — tudo no navegador.
Construtor de URL Lorem Picsum
Construa URLs de imagem placeholder do picsum.photos — dimensões, escala de cinza, desfoque, seed pra imagens estáveis, ou ID de imagem específico.
Pixelizar Imagem
Solte uma imagem e pixelize com qualquer tamanho de bloco — saída block-perfect pra censurar capturas ou criar arte retro.