Generador de Hoja de Sprites de Imágenes
Combina muchas imágenes pequeñas (iconos, estados UI, frames de personaje) en un PNG descargable y emite un bloque CSS que coloca cada uno por `background-position`. Reduce las peticiones HTTP cuando una fuente de iconos, un sprite SVG o un pipeline real de hoja de sprites no es una opción. El layout es franja horizontal, franja vertical, o una grid de columnas fijas; la hoja se dimensiona para ajustar el ítem más grande en cada fila o columna. Los archivos se procesan completamente en el lado del cliente vía canvas — tus iconos nunca salen del navegador.
Cómo usar
- Suelta o elige las imágenes. Aparecen en el orden que el OS las entrega.
- Elige layout: franjas horizontal/vertical son las más simples, grid es más densa. Configura padding para evitar sangrado.
- Descarga el PNG, copia el CSS, envíalos juntos — coincide el nombre de clase que pusiste en el prefijo CSS.
Preguntas frecuentes
- ¿Hojas de sprites vs. sprites SVG vs. fuentes de iconos?
- Los sprites PNG aún ganan cuando la fuente es un ráster real (arte de juego, miniaturas de fotos). Para iconografía UI prefiere sprites SVG (`<symbol>` + `<use>`) — escalan y responden a currentColor. Las fuentes de iconos son ahora mayormente un fallback legacy.
- ¿Qué pasa con la transparencia?
- Si mantienes el fondo transparente, el PNG se guarda con alfa (el tablero de ajedrez que ves en la vista previa es solo para hacer visible el área transparente). Si eliges blanco o negro, esos se hornean en la hoja.
Herramientas relacionadas
Efecto Duotono de Imagen
Aplica un efecto duotono de dos colores a cualquier imagen — elige color de sombra y color de luz, ajusta midpoint y contraste, descarga el resultado. Carátulas estilo Spotify en dos clics.
Desenfoque de imagen
Aplica desenfoque Gaussiano, de caja o de movimiento a cualquier imagen en tu navegador. Radio ajustable 0-64 px, con el filtro CSS equivalente listo para copiar.
Playground de Filtros CSS
Compón visualmente blur, brightness, contrast, hue, sepia, invert y más — copia el filtro CSS o el valor arbitrario de Tailwind.
Imagen → ASCII Art
Convierte cualquier imagen en ASCII art con ancho, juego de caracteres e inversión ajustables — todo en tu navegador.
Constructor de URL Lorem Picsum
Construye URLs de imagen placeholder desde picsum.photos — dimensiones, escala de grises, desenfoque, seed para imágenes estables o un ID de imagen específico.
Pixelar Imagen
Suelta una imagen y pixélala al tamaño de bloque que quieras — salida block-perfect para censurar capturas o crear arte retro.