Convertidor de HTML a GIF
Convierte animaciones HTML y CSS en un GIF animado descargable. Pega marcado con una animación o transición CSS, previsualízalo en vivo, captura una secuencia de fotogramas y exporta un GIF en bucle, todo en tu navegador.
100% Procesamiento del Lado del Cliente
Tu HTML se renderiza y convierte completamente en tu navegador. Nada se sube a un servidor.
Se capturarán 20 fotogramas de tu animación. Más fotogramas y mayor resolución tardan más en codificarse.
Vista previa
Por seguridad, las etiquetas <script> están deshabilitadas en la vista previa y la exportación. Los estilos (CSS), las animaciones CSS y las imágenes se renderizan con normalidad.
Tabla de contenidos
¿Qué es un convertidor de HTML a GIF?
Un convertidor de HTML a GIF toma marcado HTML y CSS, incluidas animaciones CSS, transiciones y efectos de keyframes, y lo graba como una secuencia de fotogramas que se une en un único GIF animado en bucle, listo para descargar o compartir donde quieras.
A diferencia de una herramienta de captura estática, registra tu contenido cambiando con el tiempo, así que un cargador que rebota, un efecto de escritura, una tarjeta que se desvanece o un ícono giratorio hecho solo con CSS puede convertirse en una imagen animada compartible sin ningún software de grabación de pantalla.
Cómo funciona
- Agrega tu HTML animado: Pega HTML/CSS con una animación o transición CSS, o sube un archivo .html.
- Previsualízalo en vivo: La herramienta renderiza tu marcado en una vista previa aislada con el ancho de captura elegido, reproduciendo la animación en tiempo real.
- Elige la configuración de captura: Selecciona duración, velocidad de fotogramas, resolución, fondo y calidad del GIF.
- Captura y codifica: La herramienta toma una instantánea de la vista previa en cada intervalo de fotograma durante la duración elegida y luego codifica todos los fotogramas en un único GIF animado.
- Descarga: El GIF terminado se descarga automáticamente, listo para reproducirse en bucle donde lo coloques.
Características
- Pega HTML o sube un archivo .html
- Vista previa en vivo que reproduce tu animación CSS antes de convertir
- Duración de captura ajustable (1-5 segundos) y velocidad de fotogramas (5/10/15 fps)
- Ancho de captura ajustable en píxeles, con resolución 1x o 2x
- Fondo blanco o de color personalizado
- Calidad del GIF baja, media o alta para equilibrar nitidez y tamaño de archivo
- Bucle infinito opcional
- Progreso en tiempo real durante la captura y codificación
- Procesamiento 100% en el cliente para mayor privacidad
Mejores prácticas
- Usa animaciones CSS con keyframes: Define tu movimiento con @keyframes o transiciones en una etiqueta <style> para que la vista previa y la captura lo reproduzcan automáticamente.
- Ajusta la duración a un ciclo de animación: Establece la duración de captura cerca de un múltiplo de la duración de tu animación para que el GIF se repita sin saltos.
- Mantén el lienzo pequeño: Widgets pequeños como cargadores, insignias o banners cortos se capturan más rápido y producen archivos GIF más pequeños y limpios que páginas completas.
- Usa una velocidad de fotogramas mayor para un movimiento fluido: 10-15 fps se ve notablemente más fluido para movimientos rápidos, mientras que 5 fps es suficiente para desvanecidos lentos.
- Equilibra calidad y tamaño de archivo: Usa Alta para degradados detallados o fotos, y Baja para interfaces sencillas de color plano para mantener el archivo pequeño.
- Prueba primero con el ejemplo: Carga el ejemplo de los puntos que rebotan para ver una animación en bucle funcional antes de pegar tu propio marcado.
Solución de problemas
El GIF no parece animado
Asegúrate de que tu HTML realmente contenga una animación, transición o efecto de keyframes CSS; una página estática sin movimiento producirá un GIF donde todos los fotogramas se ven igual.
El bucle tiene un salto o tirón visible
Ajusta la duración para que coincida con un múltiplo completo de la duración de tu animación CSS, o configura la animación CSS como infinite para que ya esté en bucle cuando comience la captura.
La conversión es lenta
Capturar y codificar muchos fotogramas a alta resolución requiere tiempo real del navegador. Reduce la duración, la velocidad de fotogramas, la resolución o la calidad del GIF para un resultado más rápido.
Faltan imágenes en el GIF
Las imágenes externas alojadas en otros dominios sin cabeceras CORS adecuadas no se pueden capturar. Usa imágenes del mismo origen o conviértelas a data URIs en base64.
Los colores se ven con bandas o dithering
El GIF admite un máximo de 256 colores por fotograma, así que los degradados suaves o las fotos pueden mostrar bandas visibles. Es una limitación del formato GIF, no del convertidor; prueba con la configuración de mayor calidad para reducirlo.
Casos de uso comunes
- Cargadores e indicadores de estado: Convierte un cargador o animación de progreso hecho solo con CSS en un GIF para usar en lugares que no pueden ejecutar CSS en vivo, como documentación o capturas para tiendas de apps.
- Demos de producto y vistas previas de UI: Captura un pequeño efecto de aspecto interactivo (estado hover, interruptor, transición) como un GIF compartible para un README, entrada de blog o presentación.
- Chat y redes sociales: Exporta una animación corta de marca como GIF para pegar en Slack, Discord o redes sociales donde subir video resulta incómodo.
- Gráficos para correo y boletines: Agrega una insignia o ícono animado sutil a un correo usando un GIF ligero, ya que la mayoría de los clientes de correo no ejecutan animaciones CSS incrustadas.
- Entrega de diseño y control de calidad: Registra cómo se comporta realmente una animación CSS y adjunta el GIF a un ticket o revisión de diseño en lugar de describir el movimiento con palabras.
Preguntas frecuentes
Sí. Tu HTML se renderiza, captura y codifica completamente en tu navegador y nunca se sube a un servidor.
No. Las etiquetas script están deshabilitadas en la vista previa y la exportación por seguridad, por lo que los scripts interactivos no se ejecutarán, pero las animaciones y transiciones CSS funcionan con normalidad.
Esta herramienta mantiene la exportación a GIF simple renderizando sobre un fondo sólido, ya que la transparencia en GIF es un recorte binario y no la mezcla alfa suave que ofrece PNG. Si necesitas una imagen transparente, usa el Convertidor de HTML a PNG de Tooladex.
La duración está limitada a 5 segundos para mantener la captura y codificación en el navegador rápidas y confiables. Para animaciones más largas, considera capturar varios clips más cortos.
La herramienta captura una captura de pantalla real de cada fotograma y luego los codifica juntos, así que más fotogramas, mayor resolución o mayor calidad aumentan el tiempo de procesamiento.
Sí. Desactiva "Bucle infinito" antes de convertir y el GIF exportado se reproducirá una sola vez en lugar de repetirse indefinidamente.
Las imágenes cargadas desde otros dominios sin soporte CORS no se pueden capturar por razones de seguridad del navegador. Usa imágenes del mismo origen o data URIs en base64.
No. Todo ocurre localmente en tu navegador y el GIF se descarga directamente a tu dispositivo.