Generador de Sprites CSS

Combina varias imágenes en una sola hoja de sprites y genera automáticamente el código CSS background-position correspondiente. Admite diseños horizontal, vertical y de cuadrícula.

🧩

Arrastra una imagen o haz clic para subirla

PNG, JPG, WEBP, BMP (hasta 40)

¿Qué es un sprite CSS?

Un sprite CSS fusiona muchos iconos en una sola imagen y usa background-position para mostrar la parte necesaria en la página.

Esto reduce significativamente el número de peticiones de imágenes que hace el navegador, una optimización común de rendimiento front-end.

Cómo usarlo

Genera un sprite en tres pasos:

  • Sube varias imágenes (hasta 40).
  • Elige una disposición horizontal, vertical o de cuadrícula y ajusta el espacio.
  • Haz clic en Generar para descargar el sprite y copiar el código CSS.

Consejos

  • Normaliza primero los tamaños de los iconos para obtener una hoja de sprites más limpia.
  • PNG conserva la transparencia, ideal para iconos.
  • El CSS generado usa la ruta relativa sprite.png; ajústala a donde realmente guardes el archivo.

Preguntas frecuentes

¿Qué es un sprite CSS?+
Un sprite combina varias imágenes pequeñas en una imagen más grande. Se usa la propiedad CSS background-position para mostrar solo una parte, lo que reduce las peticiones HTTP y acelera la carga.
¿Cuál es la diferencia entre los tres diseños?+
El diseño horizontal organiza todas las imágenes una al lado de la otra, el vertical las apila una debajo de la otra, y el diseño de cuadrícula las organiza en filas y columnas de celdas aproximadamente cuadradas.
¿Cómo uso el CSS generado?+
Cada icono corresponde a un estilo .icon-N que contiene su ancho, alto, ruta de la imagen de fondo y desplazamientos negativos. Solo cópialo en tu hoja de estilos.
¿Cuántas imágenes puedo combinar a la vez?+
Puedes subir hasta 40 imágenes a la vez y ajustar el espacio para regenerar en tiempo real.

Herramientas relacionadas

Imagen a Arte ASCIIOptimizador de Imágenes WebGenerador de Ondas SVG

Generador de Sprites CSS — generador de sprites css, generador de hojas de sprites, hoja de sprites, sprite css, combinar imágenes online gratis. Sin registro. Funciona en tu navegador.