⌨️ Generador de Efecto Máquina de Escribir
Crea efectos de texto animados de máquina de escribir
80ms
Por el equipo editorial de FontGenio · Última actualización: 12 de octubre de 2026
Generador de Efecto Máquina de Escribir
Un generador de efecto máquina de escribir — un generador de efecto de texto typewriter para la web — previsualiza tus palabras con una animación de máquina de escribir en vivo — letras que aparecen una a una con un cursor parpadeante — y te da el código CSS completo para añadir el mismo efecto a tu propio sitio. Ajusta la velocidad, el estilo de cursor y el color arriba, míralo escribir y copia el código.
Conclusiones clave
- Vista previa estilo terminal en vivo: tu texto se escribe carácter a carácter con un cursor parpadeante.
- Controles de velocidad de tipeo (20–200 ms por carácter), 3 estilos de cursor y 7 colores.
- Genera CSS copiable con la clásica técnica typewriter de steps(): sin JavaScript en tu sitio.
- El efecto es pura animación CSS: texto real que sigue siendo seleccionable y amable con el SEO.
- Funciona por completo en tu navegador: nada se sube.
¿Qué es un efecto de tipeo?
Un efecto de tipeo es una animación que revela el texto letra a letra, imitando a alguien escribiendo en tiempo real, normalmente con un cursor parpadeante al final. La implementación web clásica usa solo CSS: una función de tiempo steps() avanza el ancho visible del texto en saltos discretos del tamaño de un carácter mientras un border-right parpadeante actúa como cursor. Es un básico de secciones hero, páginas de temática terminal e interfaces estilo chatbot.
Cómo funciona este generador de efecto de tipeo
La vista previa de esta página usa JavaScript para escribir tu texto en una caja estilo terminal a la velocidad que elijas: 20 ms por carácter para una ráfaga rápida, 200 ms para un tecleo deliberado. Eliges uno de tres cursores (bloque, guion bajo o ninguno) y uno de siete colores, incluido el clásico verde terminal. Cada cambio regenera el código del efecto de tipeo bajo la vista previa.
El código generado es la receta typewriter honesta y estándar: overflow: hidden con white-space: nowrap, un keyframe de tipeo que anima el ancho de 0 a 100% en steps() iguales a tu conteo de caracteres, más un keyframe de parpadeo que alterna el color del borde. La duración se calcula desde la longitud de tu texto y la velocidad, así el CSS coincide exactamente con la vista previa. Pégalo en tu hoja de estilos, aplica la clase typing-effect y la animación funciona con cero JavaScript.
Ejemplo práctico: código de animación de tipeo
Entrada: ¡Hola, mundo! a 80 ms por carácter produce un CSS así (duración autocalculada de 1.0 s para 13 caracteres):
| Ajuste | Valor en este ejemplo | Qué cambia |
|---|---|---|
| Velocidad | 80 ms/carácter | Duración de la animación (13 caracteres → 1.0 s) |
| Cursor | Bloque | Barra parpadeante con border-right |
| Color | Verde terminal (#0f0) | Color del texto y del cursor |
| Técnica | steps(13, end) | Un salto discreto por carácter |
El conteo de steps() siempre iguala la longitud de tu texto: eso hace que las letras aparezcan de una en una en lugar de deslizarse.
Cómo usar esta herramienta
- Escribe tu texto en el campo de entrada de arriba.
- Pulsa Iniciar para ver la vista previa de tipeo; ajusta velocidad, estilo de cursor y color.
- Haz clic en Copiar código: el CSS generado se copia a tu portapapeles.
- Pégalo en tu hoja de estilos y añade class="typing-effect" a tu elemento de texto.
Dónde funcionan mejor los efectos de máquina de escribir
Las animaciones de tipeo brillan en líneas cortas de alto impacto: titulares hero ("Creamos sitios web."), portafolios de temática terminal, saludos de chatbot y mensajes de estado de carga. Concentran la atención porque el movimiento más la revelación progresiva es inherentemente visible. Fallan a escala: nunca animes con tipeo párrafos, navegación ni nada que el usuario necesite hojear. Y nota la restricción de la técnica: white-space: nowrap significa que el efecto va para líneas únicas; el tipeo multilínea necesita contenedores por línea o un enfoque JavaScript.
Limitaciones
- El CSS generado es de una sola línea: el texto largo desbordará su contenedor en lugar de partirse; mantén entradas cortas o añade tu propio manejo responsive.
- El conteo de steps() queda fijado para tu conteo exacto de caracteres; si editas el texto después, debes regenerar el código.
- El efecto no se puede copiar y pegar en redes sociales: como todo CSS, solo funciona donde corren hojas de estilo.
- Para visitantes que prefieren movimiento reducido, condiciona la animación con @media (prefers-reduced-motion: no-preference).
- Los lectores de pantalla anuncian el texto completo de una vez (lo cual está bien): no dependas de la animación para secuenciar información.
Efecto de tipeo frente a alternativas
| Método | Ideal para | Ojo con |
|---|---|---|
| Este generador | Vista previa instantánea + CSS copiable de tipeo | Solo líneas únicas; hay que regenerar al editar |
| Generador de texto animado | Otras animaciones CSS (arcoíris, neón, glitch, rebote) | Sin efecto de tipeo |
| Generador de texto Matrix | Estética terminal hacker | Sin animación de tipeo letra a letra |
| JavaScript a mano | Tipeo multilínea o interactivo | Más código que mantener |
Preguntas frecuentes
¿Cómo creo un efecto de máquina de escribir en mi web?
Escribe tu texto en esta herramienta, ajusta velocidad, cursor y color, y copia el código CSS generado. Pégalo en tu hoja de estilos y añade la clase typing-effect a tu elemento.
¿El generador de efecto máquina de escribir es gratis?
Sí: gratis, sin cuenta y sin límites. Todo funciona en tu navegador.
¿Necesito JavaScript en mi sitio para el efecto?
No. El código generado es CSS puro con la técnica steps(): overflow hidden, animación de ancho por pasos y cursor parpadeante con border-right. Cero JavaScript.
¿Qué es steps() en CSS?
Una función de tiempo que avanza la animación en saltos discretos en lugar de continuo. Con steps(13, end), el ancho del texto avanza en 13 saltos: una letra visible por salto.
¿Funciona con textos largos o varias líneas?
El código generado es de una sola línea (white-space: nowrap). Para textos largos o multilínea necesitarás contenedores por línea o un enfoque JavaScript; mantén las entradas cortas.
¿El efecto de tipeo es bueno para el SEO?
Sí: el texto sigue siendo texto real en el HTML, seleccionable y rastreable. Los lectores de pantalla anuncian el contenido completo de una vez.
¿Debo respetar prefers-reduced-motion?
Sí. Condiciona la animación con @media (prefers-reduced-motion: no-preference) para no mostrar movimiento a visitantes que pidieron reducirlo.
¿Puedo cambiar el texto después sin regenerar?
No del todo: el conteo de steps() está calculado para tu longitud exacta de caracteres. Si editas el texto, regenera el código en la herramienta para que las letras aparezcan una a una.
Herramientas relacionadas
- Generador de Texto Animado — más animaciones CSS para webs
- Generador de Texto Matrix — estética terminal hacker
- Generador de Texto Glitch — distorsión estilo error del sistema
- Todas las Herramientas de Texto Divertido — explora la colección completa