Generador de texto con efecto glitch

Por Bogdan Sandu (EN) · Publicado el 9 de junio de 2025 · Última actualización 13 de septiembre de 2026

Este generador de texto con efecto glitch transforma una línea de texto en un efecto glitch animado con CSS y te entrega el HTML y el CSS para reproducirlo. Todo funciona en tu navegador. No se sube ningún dato.

Lo que puedes configurar:

• Cinco efectos: Fallo con color, onda digital, codificación, pulso de neón y corrupción de datos
• Texto y un tamaño de fuente control deslizante de 20px a 200px
• Cuatro colores: fondo, texto y dos colores de falla, cada uno con un selector y un campo hexadecimal

La vista previa se anima a medida que cambia la configuración. El panel de código debajo se actualiza al mismo tiempo y Copiar coloca HTML y CSS en tu portapapeles con un solo clic.

Cómo utilizar este generador de texto con fallas

1. Elige un efecto del menú desplegable Glitch Effect.
2. Escribe tu texto. Las palabras cortas en tamaño grande se leen mejor, ya que el efecto duplica el texto en dos capas desplazadas.
3. Arrastra el control deslizante Tamaño de fuente y elija los cuatro colores. Los dos colores de falla impulsan las capas de división de colores en todos los efectos excepto Neon Pulse, donde configuran el brillo.
4. Verifica la vista previa y luego haga clic en Copiar. Pega el HTML donde debería aparecer el texto y el bloque <style> en tu página u hoja de estilo.
5. Haz clic en Restablecer para volver a los valores predeterminados.

Con la configuración predeterminada, HTML se ve así:

<div class="gsw-glitch-wrapper" style="background-color: #1A1F2C;">
  <div class="gsw-glitchWithColor"
       data-text="Glitchy Text"
       style="font-size: 80px; color: #F2FCE2; --glitch-color-1: #8B5CF6; --glitch-color-2: #D946EF;">
    Glitchy Text
  </div>
</div>

El atributo data-text importa. Las capas desplazadas son pseudoelementos ::before y ::after que leen su contenido, por lo que si cambia el texto más adelante, cambia también el atributo.

El CSS que viene con él contiene la regla contenedora, las reglas .gsw-glitchWithColor y las tres animaciones de fotogramas clave que utilizan. Aquí está el principal, recortado:

.gsw-glitchWithColor {
  text-shadow:
    0.05em 0 0 var(--glitch-color-1),
    -0.05em -0.025em 0 var(--glitch-color-2),
    -0.025em 0.05em 0 var(--glitch-color-1);
  animation: gsw-glitch 500ms infinite;
}

.gsw-glitchWithColor::before {
  left: 0.05em;
  text-shadow: -0.05em 0 var(--glitch-color-1);
  animation: gsw-noise-1 3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

Los efectos se construyen con tres recursos: text-shadow (EN) para separar los colores, recortes con clip-path (EN) para crear las distorsiones horizontales y @keyframes (EN) para animarlas. Una vez incorporado el código a tu proyecto, puedes modificar cualquier parte.

Lo que la herramienta no hace

• No hay controles deslizantes de velocidad o intensidad. Para ralentizar un efecto, aumente las duraciones en las declaraciones animation, por ejemplo 500ms a 1200ms.
• La fuente se fija en Courier New en la vista previa. Anule font-family en la clase de efecto en tu propia CSS.
• Genera código, no archivos. No hay exportación de GIF, MP4 o PNG. Para un video o una publicación social, grabe en pantalla la vista previa o reconstruya el efecto en una herramienta de video.
• No genera caracteres "fallados" Zalgo o Unicode para biografías y aplicaciones de chat. La sección sobre el texto de Zalgo a continuación explica la diferencia.

La animación se repite para siempre. Es posible que los lectores tengan activado el prefers-reduced-motion, así que ajuste las líneas animation en una consulta de medios prefers-reduced-motion (EN), o combine el efecto con un respaldo estático del generador de sombras de texto en CSS.

¿Qué es un generador de texto animado con fallas?

Un generador de texto animado con fallas es una herramienta de diseño basada en web. Convierte el texto escrito en una imagen distorsionada y en movimiento en lugar de una simple cadena de caracteres.

La distorsión cambia con el tiempo a través del movimiento, la división del color o el ruido. Eso lo distingue de una fuente estática con fallas o de una única imagen con fallas que alguien editó a mano.

Lo que normalmente genera:

• Una animación en bucle que se repite cada pocos segundos.
• Un efecto de transición único que se reproduce una vez y se estabiliza
• Un archivo exportable o un fragmento de código que colocas en otro proyecto

Una herramienta como este generador de texto con efecto glitch o YayText (EN) automatiza todo esto en el navegador. Nadie tiene que introducir valores de opacidad manualmente ni exportar fotogramas uno a la vez.

Compare eso con un diseñador que coloca manualmente capas de texto rojo y cian en Photoshop y separa cada capa unos pocos píxeles. Ambos pueden parecer defectuosos, pero sólo el generador sigue moviéndose sin más trabajo manual.

¿Qué es el texto Zalgo y cómo se relaciona con el texto animado con fallas?

Zalgo text (EN) es un efecto Unicode estático. Se apila combinando signos diacríticos sobre letras comunes hasta que parece que la palabra está sangrando o derritiéndose.

El nombre proviene de un meme de terror de Internet de 2004, no de ningún término técnico oficial, y se ha mantenido desde entonces.

El bloque de combinación de marcas diacríticas (EN) (U+0300 a U+036F) del Unicode Consortium define 112 caracteres, el conjunto central del que la mayoría de los generadores Zalgo extraen sus marcas.

El texto de Zalgo por sí solo no se mueve.

Necesita un CSS o un envoltorio de lienzo que anime la posición, la opacidad o las marcas mismas cuadro por cuadro. Sólo entonces cuenta como parte de la salida de un generador de texto animado con fallas.

Dónde suelen parar las herramientas Zalgo:

• Generan la cadena corrupta
• Rara vez añaden movimiento por sí solos.
• Copiar y pegar el texto de Zalgo permanece fijo una vez que llega a una aplicación de chat o a un campo de biografía

¿Qué estilos de fallos puedes animar?

La mayoría de los generadores no te limitan a un solo estilo. Te permiten superponer dos o tres efectos, por ejemplo, un RGB dividido bajo un pase de ruido estático. La mezcla parece más caótica que cualquier efecto por sí solo.

Esta categorización se debe más a la teoría del arte glitch que a la ingeniería de software. El Glitch Studies Manifesto (EN) de la artista y teórica holandesa Rosa Menkman, publicado en 2010, argumentó que estos errores visuales merecían ser estudiados como su propia estética. No deben descartarse como producción fallida.

Combinaciones que aparecen con más frecuencia:

• RGB división más ruido estático para una apariencia de señal corrupta
• Líneas de escaneo VHS plus para pura nostalgia retro
• Píxel corrupto solo para efectos de desplazamiento breves e impactantes

¿Cómo funciona un generador de texto animado con fallas?

Debajo del capó, un generador de texto de falla animado genera su movimiento a través de uno de tres métodos: CSS fotogramas clave, SVG primitivas de filtro o renderizado de lienzo controlado por JavaScript. Esta herramienta utiliza la primera.

• CSS animación de fotogramas clave
• SVG primitivas de filtro
• Representación de lienzo impulsada por JavaScript

CSS Método de fotograma clave

Este método define un puñado de fotogramas y permite que el navegador interpola entre ellos. Cambia los desplazamientos de las sombras del texto o los valores de la clip-path cada pocos cientos de milisegundos.

Lo que normalmente se anima:

• Desplazamientos de sombras de texto para la división roja y cian
• Cortes de clip-path para desgarros horizontales irregulares
• Parpadeo de opacidad sincronizado con una curva de relajación pronunciada

La ampliamente compartida demostración de CodePen del desarrollador Lucas Bebber, CSS Glitched Text (EN), logra esto completamente a través de CSS fotogramas clave (EN) sin una línea de JavaScript. Los tutoriales que enseñan esta técnica todavía apuntan a ella y los efectos en esta página siguen el mismo patrón.

SVG Método de filtrado

Este método utiliza SVG primitivas de filtro, principalmente feTurbulence (EN) para generar ruido y feDisplacementMap (EN) para desplazar píxeles a lo largo de ese ruido. The result is the wavy tearing look.

El apoyo es profundo aquí. feDisplacementMap tiene un 97.26% de soporte global para navegadores, según los datos de uso de Can I Use (EN) en 2026 extraídos de StatCounter.

feColorMatrix maneja la pieza de color, separando los canales rojo y azul para simular la división cromática sin duplicar la capa de texto.

Método con Canvas y JavaScript

Este método dibuja cada cuadro en un elemento de lienzo y lo vuelve a dibujar continuamente a través de un bucle JavaScript. Proporciona el control más granular de los tres.

Ese control tiene un costo. Crear animaciones de lienzo (EN) fluidas de esta manera exige un bucle de renderizado, ya que las llamadas de dibujo de lienzo no se programan ni se repiten.

Dependencia: un bucle de renderizado, generalmente construido en requestAnimationFrame (EN) o una biblioteca de animación, ya que las llamadas de lienzo sin formato se activan una vez y se detienen.

GSAP (EN), una de las bibliotecas más comunes para este trabajo, afirma en su propio sitio que se ejecuta en más de 12 millones de sitios. Una gran parte del atractivo es que suaviza las inconsistencias entre los navegadores.

¿Qué controles de personalización conviene buscar?

Un puñado de controles deciden si un generador se siente flexible o se siente como un único ajuste preestablecido fijo. Esta herramienta expone el texto, el tamaño y cuatro colores, y deja el tiempo en manos del CSS que copias.

• Velocidad: qué tan rápido se realiza el ciclo del efecto, generalmente establecido en milisegundos por fotograma
• Intensidad: qué tan lejos se desplazan los píxeles o canales de color desde su posición original
• Desplazamiento del canal de color: qué tan lejos se separan las capas roja, verde y azul entre sí
• Elección de fuente: si la herramienta le permite cambiar el tipo de letra base antes de fallar

Si presiona la velocidad demasiado alta, el texto dejará de ser legible. Simplemente parece una mancha de color, lo que anula el objetivo si el mensaje aún necesita llegar.

Some tools expose these controls individually. Funcionan casi como un CSS generador de filtros de color (EN) dedicado, donde arrastras controles deslizantes para tono, contraste y compensación de canal por sí solos. YayText, por ejemplo, incluye controles deslizantes exactamente para este tipo de control independiente.

Las herramientas más simples, de un solo clic, tienden a omitir la mayor parte de esto, ofreciendo un solo botón de "fallo" sin diales que girar.

¿Qué formatos de exportación admiten los generadores de texto Glitch?

La diferencia de tamaño entre estos no es pequeña. En el propio ejemplo de conversión web.dev (EN) de Google, un GIF animado de 3.7 MB resultó en 551 KB como MP4 y solo 341 KB como archivo WebM. Misma animación, aproximadamente una décima parte del peso del archivo.

Un puñado de generadores, incluido este, omiten los formatos de video por completo y le brindan algo más cercano a una exportación CSS de animación (EN): código de fotograma clave listo para usar que se pega directamente en una hoja de estilo. CapCut (EN) se inclina hacia el otro lado y exporta directamente a MP4 para sus plantillas de texto con fallas móviles. Sus usuarios colocan el resultado en una línea de tiempo de video, no en una base de código.

No todos los generadores ofrecen todos los formatos, y esa brecha se convierte en un verdadero factor de decisión una vez que sabes hacia qué destino se dirige el texto.

¿Qué plataformas ejecutan generadores de texto animado con fallas?

Los generadores de texto animado con fallas se ejecutan en tres lugares: dentro de una pestaña del navegador, como software de escritorio instalado o mediante una aplicación móvil dedicada.

Las herramientas basadas en navegador a veces desdibujan esa primera línea. Un número cada vez mayor de ellas se instalan como una aplicación web progresiva (EN) y siguen funcionando sin conexión una vez que las has abierto una vez.

El renderizado tampoco es perfectamente consistente en todos los ámbitos. Un navegador más antiguo o menos conocido aún puede tropezar con un problema de compatibilidad entre navegadores (EN) con un filtro SVG o una llamada de sorteo de lienzo. Adobe After Effects maneja el extremo del espectro del escritorio con controles de composición y exportación en capas que una herramienta de navegador no ofrece. CapCut cubre el extremo móvil para cualquiera que pueda crear el efecto directamente en un video de formato corto.

Generadores de texto con fallas gratuitos o de pago: ¿cuál debería elegir?

Los niveles gratuitos cubren la mayoría de los usos ocasionales y únicos. Los niveles pagos se mantienen una vez que la resolución, las marcas de agua o los derechos comerciales entran en escena.

Qué niveles gratuitos suelen retener:

• Una marca de agua visible en archivos de video o GIF exportados
• Exportación de mayor resolución, a menudo limitada a 1080p
• Derechos de uso comercial para el trabajo del cliente.
• Exportación por lotes en múltiples variaciones de texto

Los niveles pagos desbloquean exactamente lo que falta en el lado gratuito, además de colas de exportación más rápidas en plataformas más ocupadas.

El precio del lado pago no es fijo. CapCut reestructuró sus planes en 2026 y el precio de su nivel Pro casi se duplicó, de aproximadamente $9.99 a $19.99 al mes. Consulte la lista actual de la aplicación antes de presupuestarla.

Canva Pro, en comparación, se mantuvo en $ 18 por mes para una persona en su página de precios en septiembre de 2026. Un equipo de cinco personas necesita cinco inicios de sesión separados o pasar a su plan Business por puesto.

Para una sola publicación social, una herramienta gratuita la cubre. Para el trabajo repetido del cliente con una apariencia de marca fija, la eliminación y resolución de la marca de agua del nivel pago por sí sola generalmente justifica el costo.

¿Qué generador de texto con fallas se adapta a tu caso de uso?

El destino decide la configuración de exportación, no el gusto personal.

Especificaciones que vale la pena comprobar antes de exportar:

• Miniatura de YouTube: 1280 x 720 px, 16:9, menos de 2 MB, ancho mínimo 640 px, según Ayuda de YouTube (EN)
• Carretes de Instagram: 1080 x 1920 px, 9:16, ahora dura hasta 180 segundos después de que Instagram ampliara el límite de 90 segundos en enero de 2025
• Video TikTok: 1080 x 1920 px, 9:16 vertical, el mismo formato de pantalla completa utilizado en casi todas las ubicaciones de la aplicación

Una animación de texto con falla del tamaño de la imagen de héroe (EN) de un sitio web parece recortada e incómoda una vez colocada en una ranura de carretes de 9:16. Lo contrario es igualmente cierto.

La exportación estática de LingoJam funciona bien como imagen de fondo detrás de un enlace de biografía. No tiene nada que ofrecer una vez que el destino es una publicación en movimiento de TikTok o Reels.

Hacer coincidir la exportación con el destino por adelantado evita el ciclo de reexportación. Ese ciclo a menudo consume más tiempo del que tardó en generarse el efecto de falla en sí.

¿Cómo se crea texto animado con fallas en una herramienta de video, paso a paso?

El siguiente orden se aplica a la mayoría de los generadores que exportan un archivo en lugar de código, independientemente de cuál elija.

1. Escribe o pegue el texto en el campo de entrada del generador.
2. Elige un estilo base: RGB dividido, VHS, ruido estático o píxel corrupto.
3. Establece la intensidad y la velocidad lo suficientemente bajas para que el mensaje sea legible de un vistazo.
4. Obtenga una vista previa de la animación en el tamaño que realmente se mostrará, no en el lienzo predeterminado del generador.
5. Elige un formato de exportación que coincida con el destino decidido anteriormente.
6. Descarga el archivo y ábralo una vez en la plataforma de destino antes de publicarlo en cualquier otro lugar.

Antes de exportar, verifica:

• ¿El texto permanece legible en el tamaño más pequeño que se mostrará?
• ¿El tamaño del archivo se ajusta al límite de carga del destino?
• ¿La punta del bucle se ve limpia o salta en la costura?

Saltarse el paso de vista previa es el error más común. El lienzo de vista previa predeterminado de un generador rara vez coincide con la pantalla de un teléfono. El texto que se lee bien con 800 píxeles de ancho puede convertirse en una mancha con 340.

¿Cuándo no funciona el texto animado con fallos?

El texto animado con fallos falla por motivos de accesibilidad antes de fallar por motivos de estilo.

El texto parpadeante o que cambia rápidamente puede provocar convulsiones en personas con epilepsia fotosensible. Este es exactamente el tipo de riesgo para el que se crearon directrices formales de accesibilidad web (EN). El W3C limita cualquier contenido parpadeante a tres destellos por segundo según el criterio de éxito WCAG 2.3.1 (EN).

Un rápido ruido estático o un efecto de fluctuación de VHS pueden cruzar ese umbral sin que nadie se dé cuenta durante una revisión rápida del diseño.

Contextos donde hace más daño que bien:

• Texto del cuerpo, texto legal o cualquier cosa que un lector de pantalla necesite analizar para ordenar
• Menús y botones de navegación en los que las personas confían para moverse por un sitio
• Cualquier encabezado o etiqueta necesaria para completar una tarea, como un campo de formulario o un paso de pago.

Los lectores de pantalla tampoco anuncian distorsión visual. La mayoría de las tipografías accesibles (EN) tratan la distorsión intensa como, en el mejor de los casos, decorativa, nunca como algo destinado a tener significado por sí solo.

Los lienzos más pesados o los efectos basados en SVG también cuestan más de renderizar, y una página llena de ellos en un teléfono de gama baja puede tartamudear visiblemente.

En el contenido breve, decorativo y que se puede omitir es donde el efecto aún gana su lugar: un titular destacado, un meme, un gráfico social único. Nada de lo que dependa el lector para utilizar la página.

Preguntas frecuentes: Generador de texto con efecto glitch

¿Cuál es la diferencia entre texto con fallas y efectos de texto normales?

Los efectos de texto normales, como sombras o degradados, cambian de apariencia sin implicar un mal funcionamiento.

El texto con fallas imita una transmisión rota a propósito, usando RGB división, ruido estático o píxeles corruptos para señalar una falla digital. La diferencia es intención, no solo imágenes.

¿Es el texto con fallas lo mismo que el arte con fallas?

No. El arte glitch es un movimiento más amplio, décadas de artistas que exploran los errores de compresión, la retroalimentación y las fallas del hardware como material estético.

El texto glitch es una aplicación limitada de ese movimiento, tomando prestado su vocabulario visual específicamente para la tipografía.

¿Se puede exportar texto con fallas como código CSS o HTML en lugar de un archivo de video?

Sí, en herramientas creadas alrededor de CSS fotogramas clave o SVG filtros, incluido este.

Estos exportan código de hoja de estilo ya preparado en lugar de un archivo renderizado. La animación se ejecuta en vivo en un navegador en lugar de reproducir un video fijo o GIF.

¿Cuál es el mejor generador de texto con fallos para un principiante frente a un editor profesional?

A los principiantes les va mejor con una herramienta de navegador de un solo clic como LingoJam o Cool Text, sin configuraciones que puedan juzgar mal.

Los editores profesionales necesitan controles granulares sobre la velocidad, la intensidad y la compensación del canal de color, por lo que una herramienta paga como Canva Pro o CapCut Pro merece su precio.

¿Qué software se adapta a cada nivel de habilidad: CodePen, GSAP, After Effects o CapCut?

CodePen es adecuado para que los desarrolladores copien y adapten demostraciones existentes. GSAP se adapta a los desarrolladores que escriben animaciones de lienzo personalizadas desde cero.

After Effects sirve a los diseñadores de movimiento que crean compuestos en capas, mientras que CapCut cubre a los no codificadores que solo necesitan una exportación móvil, no se requieren conocimientos de compilación.

¿Qué errores comúnmente interrumpen una animación de texto con fallas?

Una velocidad demasiado alta convierte el texto en una mancha ilegible.

Exportar con el tamaño de lienzo predeterminado del generador en lugar de las dimensiones de la plataforma de destino provoca el recorte. Omitir la verificación del punto de bucle deja un salto visible donde se reinicia la animación.

¿La animación de texto con fallas ralentiza la carga de la página?

Un efecto de fotograma clave CSS o de filtro SVG no agrega casi nada, ya que el navegador ya sabe cómo analizar esas reglas de estilo.

Una exportación de GIF o vídeo es más pesada y, en comparación, agrega un peso de carga real.

¿Cuánto le cuesta un generador de texto animado con fallas con el tiempo?

Para empezar, un generador de texto animado con fallos no cuesta nada. El nivel gratuito se mantiene bien hasta que los límites de resolución, marcas de agua o límites de exportación chocan con el trabajo del cliente de pago que necesita un archivo limpio y sin marca.

Una secuencia evita pagar de más:

• Pruebe primero el efecto en una herramienta gratuita
• Tenga en cuenta qué límite bloquea la obra: marca de agua, resolución o formato
• Actualice solo para ese límite, no para todo el conjunto de herramientas

La compensación es un cargo mensual recurrente por controles, como la compensación de canal de color independiente, que la mayoría de los proyectos tocan sólo unas pocas veces al mes.

Los niveles pagos cambian de precio con suficiente frecuencia como para que valga la pena volver a verificar una decisión de suscripción con los listados actuales, una advertencia confirmada en septiembre de 2026. Cualquiera que cree este efecto desde cero en el código obtiene más provecho de una mirada más amplia a las CSS animaciones de texto (EN). Los mismos fotogramas clave y principios de relajación se aplican mucho más allá de un estilo de falla. Para los cortes específicamente, el Clip Path Generator te permite dibujar los polígonos visualmente.