Generador de Texto Animado
Crea espectaculares animaciones de texto CSS para tu sitio web. Elige entre 10 efectos: máquina de escribir, glitch, parpadeo neón, rebote, onda y más. Personaliza cada parámetro y copia el código en segundos.
Animation Style
Text
Typography
Animation
Preview
Generated CSS
.typewriter {
/* Animation text styles */
color: #6366F1;
font-size: 48px;
font-weight: 700;
font-family: ui-sans-serif, system-ui, sans-serif;
letter-spacing: 2px;
display: inline-block;
/* Typewriter-specific styles */
overflow: hidden;
white-space: nowrap;
border-right: 3px solid #6366F1;
animation: blink 3s step-end 1;
width: 0;
animation: typing 3s steps(13, end) forwards,
blink 0.8s step-end 1;
}
/* Typewriter cursor blink */
@keyframes blink {
0%, 100% { border-right-color: currentColor; }
50% { border-right-color: transparent; }
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}¿Por qué usar nuestro generador de texto animado?
- 10 estilos de animación: el generador incluye 10 estilos distintos de animación CSS: máquina de escribir con cursor parpadeante, fundido de entrada suave, deslizamiento desde cualquier dirección, entrada con rebote, glitch ciberpunk con canales de color desplazados, parpadeo neón con brillo, oscilación pulsante, sacudida/vibración, onda en cascada por letra y rotación de volteo 3D.
- Controles de personalización completos: personaliza todos los aspectos de tu animación de texto: tamaño de fuente (16-96 px), grosor (100-900), familia tipográfica, espaciado entre letras, duración de la animación, retardo y número de iteraciones (una vez, 3 veces o bucle infinito). Para los estilos glitch y neón, ajusta por separado los colores secundario y de brillo.
- 100% privado - sin subidas: toda la generación de código de animación ocurre localmente en tu navegador. Tu texto y tus ajustes nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para proyectos sensibles y diseños propietarios.
- Gratis y sin límites: genera animaciones de texto ilimitadas sin registro, sin suscripción y sin límites de uso. El generador de texto animado es totalmente gratis para siempre y sin anuncios que bloqueen la interfaz.
Casos de uso comunes del generador de texto animado
- Secciones hero de landing pages: los desarrolladores web usan el generador de texto animado para crear titulares llamativos en secciones hero. Las animaciones de máquina de escribir y fundido aportan un toque pulido y profesional a las landing pages, mientras que los efectos de rebote y deslizamiento atraen la atención hacia llamadas a la acción clave sin necesidad de bibliotecas JavaScript.
- Portfolios y currículums personales: diseñadores y desarrolladores usan el generador para añadir animaciones sutiles a sitios de portfolio y currículums online. Los efectos de onda y pulso hacen destacar los encabezados de nombre y los aspectos destacados de habilidades manteniendo una estética limpia y profesional.
- Intros y superposiciones de YouTube: los creadores de contenido usan el generador para crear superposiciones de texto animado para intros de vídeo, rótulos inferiores y tarjetas de cierre. Los efectos glitch y parpadeo neón son especialmente populares en canales de gaming y contenido tecnológico donde encaja la estética ciberpunk.
- Pantallas de carga de apps móviles: los desarrolladores de apps móviles usan el generador para prototipar texto animado en pantallas de bienvenida y estados de carga. Las animaciones de fundido y pulso crean transiciones suaves y poco intrusivas que mejoran el rendimiento percibido de las aplicaciones móviles.
- Gráficos para redes sociales: los gestores de redes sociales usan el generador para crear texto animado para publicaciones e historias. Las animaciones solo con CSS funcionan muy bien para contenido basado en navegador y se pueden capturar en pantalla para plataformas que no admiten animaciones personalizadas de forma nativa.
- Presentaciones y demos: ponentes y educadores usan el generador para crear texto animado para diapositivas y demos en directo. El efecto de máquina de escribir es especialmente eficaz para demostraciones de código y tutoriales paso a paso donde el texto debe aparecer de forma progresiva.
¿Qué es la animación de texto CSS?
La animación de texto CSS usa keyframes y propiedades de animación de CSS para crear efectos de movimiento en elementos de texto sin necesidad de JavaScript ni bibliotecas externas. Nuestro generador de texto animado crea animaciones CSS puras para 10 efectos diferentes, desde máquina de escribir y fundido hasta glitch y parpadeo neón. Cada animación se construye con reglas @keyframes estándar y la propiedad abreviada animation, lo que las hace compatibles con todos los navegadores modernos.
Cómo funciona nuestro generador de texto animado
- Elige un estilo de animación: selecciona entre 10 preajustes (Máquina de escribir, Fundido, Deslizamiento, Rebote, Glitch, Parpadeo neón, Pulso, Sacudida, Onda, Volteo). Cada preajuste define un color y una duración predeterminados optimizados para ese efecto concreto.
- Personaliza tu texto y parámetros: introduce cualquier texto (hasta 100 caracteres) y ajusta tamaño de fuente, grosor, familia tipográfica, espaciado entre letras, duración de la animación, retardo y número de iteraciones. Para los estilos glitch y neón, personaliza los colores secundario y de brillo. Para el deslizamiento, elige la dirección.
- Previsualiza y copia: la vista previa en vivo muestra tu animación en tiempo real. Haz clic en Reproducir de nuevo para reiniciar la animación desde el principio. Cuando estés satisfecho, copia el código CSS generado o el fragmento completo HTML+CSS para usarlo en tu proyecto.
Técnicas de animación explicadas
- Máquina de escribir: usa overflow: hidden con ancho animado y un cursor border-right parpadeante. La función de temporización steps() crea la aparición carácter a carácter.
- Glitch: combina varias capas de text-shadow con colores desplazados (rojo y cian) que cambian aleatoriamente en intervalos de keyframe. Un keyframe glitchSkew independiente añade una sutil distorsión de transform para mayor realismo.
- Parpadeo neón: usa text-shadow y box-shadow en capas con capas blanca y de color de brillo. El efecto de parpadeo se consigue ocultando aleatoriamente las sombras en porcentajes concretos de keyframe, simulando un fallo eléctrico.
- Onda: cada letra se envuelve en un <span> con valores escalonados de animation-delay, creando un efecto de ola en cascada que se propaga de izquierda a derecha.
Privacidad, seguridad y disponibilidad
Procesamiento 100% en el lado del cliente: nuestro generador de texto animado se ejecuta íntegramente en tu navegador. Ningún contenido de texto, valor de color o código generado se sube, almacena ni transmite a ningún servidor. Esto lo hace seguro para proyectos sensibles y diseños propietarios.
Sin registro ni límites: el generador de texto animado es totalmente gratuito, sin cuenta, sin límites de uso y sin funciones premium. Genera animaciones de texto ilimitadas al instante y sin restricciones.
Preguntas frecuentes
Un generador de texto animado es una herramienta online gratuita que crea animaciones de texto basadas en CSS. Escribes tu texto, eliges entre 10 efectos de animación (máquina de escribir, fundido, deslizamiento, rebote, glitch, parpadeo neón, pulso, sacudida, onda o volteo), personalizas colores, tiempos y fuentes, y obtienes código HTML y CSS listo para usar en tu sitio web.
¡Sí! El resultado generado son animaciones CSS estándar con keyframes y HTML. Funciona en todos los navegadores modernos (Chrome, Firefox, Safari, Edge) y se puede añadir a cualquier sitio web, landing page o aplicación web, sin necesidad de JavaScript ni bibliotecas externas.
El efecto de máquina de escribir hace que los caracteres aparezcan uno a uno, simulando la escritura de una máquina de escribir o un terminal. Usa @keyframes de CSS con overflow oculto, un cursor parpadeante (border-right animado) y una animación de expansión de ancho con temporización steps(). Perfecto para secciones hero y demos de código.
Usa el control de Iteración de la herramienta: actívalo en «Infinito» para un bucle sin fin. Esto establece la propiedad CSS animation-iteration-count en infinite. Los efectos como parpadeo neón, pulso, sacudida y onda funcionan especialmente bien con repetición infinita.
¡Sí! Los 10 efectos de animación usan @keyframes y propiedades CSS estándar (transform, opacity, text-shadow, etc.) con buen soporte en navegadores móviles modernos, incluidos Chrome para Android, Safari en iOS y Samsung Internet. Las animaciones son ligeras y funcionan bien en móviles sin tirones ni tartamudeos.
Por supuesto. El deslizador de Duración controla cuánto dura cada ciclo de animación (en segundos). Las duraciones cortas (0,3-1 s) van bien para efectos de sacudida y pulso. Las medianas (1-3 s) funcionan bien para fundido, deslizamiento y rebote. Las largas (3-5 s) son ideales para máquina de escribir, onda y glitch.
Sí. El efecto de onda envuelve cada carácter en un span en línea con un retardo de animación escalonado, creando un efecto de ola en cascada de izquierda a derecha. Los espacios se conservan como entidades para que el texto mantenga su espaciado original mientras cada letra se anima de forma independiente.
La herramienta admite textos de hasta 200 caracteres. Esto garantiza un rendimiento fluido de la vista previa en el navegador. Para textos más largos, puedes generar el CSS y aplicarlo a tu texto completo en tu propio código: las animaciones con keyframes funcionan con cualquier longitud de texto.