Generador de Texto Glitch CSS

¿Qué es esta herramienta?

Un efecto glitch en CSS simula el aspecto de una señal de transmisión corrupta o una cinta VHS dañada duplicando un texto dos veces con pseudo-elementos ::before y ::after, desplazando cada copia ligeramente con una sombra de texto de color (clásicamente rojo y cian, recordando los errores de señal RGB analógica), y animando el clip-path de cada copia con @keyframes para que distintas franjas horizontales de cada copia coloreada parpadeen con el tiempo.

La técnica no necesita imágenes, ni un bucle de animación en JavaScript, ni canvas — es CSS puro superpuesto sobre un único elemento HTML que lleva su propio texto dos veces: una como contenido de texto real, y otra mediante un atributo data-text que los pseudo-elementos leen con content: attr(data-text).

Fuente: CSS Pseudo-Elements Module Level 4, W3C — define los pseudo-elementos ::before/::after y la función attr() sobre los que se construye este efecto.

¿Por qué utilizarlo?

• Vista previa animada en vivo — ves el efecto glitch real mientras escribes y ajustas los parámetros, no solo una maqueta estática.
• Dos colores de acento ajustables de forma independiente, con el clásico rojo/cian por defecto pero personalizables para cualquier marca o tema.
• El control de intensidad ajusta el desplazamiento en píxeles de la sombra de color; el de velocidad controla la rapidez del ciclo de keyframes del clip-path.
• Copia tanto el CSS (incluidos los bloques @keyframes completos) como la estructura HTML exacta necesaria, ya que el efecto depende de un atributo data-text que coincida con el texto visible.
• CSS puro — sin JavaScript en tiempo de ejecución una vez está en tu página, y sin librerías externas ni imágenes que cargar.
• Gratis, sin registro, se ejecuta enteramente en tu navegador.

Cómo utilizarlo

1. Escribe el texto que quieres distorsionar en el campo de texto — la vista previa se actualiza al instante.
2. Elige dos colores de acento; el clásico por defecto es rojo y cian para un aspecto retro de separación RGB, pero cualquier par de colores contrastantes funciona.
3. Ajusta el control de intensidad para controlar cuánto se separan las dos capas de color — valores más altos se leen como un glitch más agresivo.
4. Ajusta el control de velocidad para controlar la rapidez del parpadeo.
5. Copia el bloque de CSS y pégalo en tu hoja de estilos.
6. Copia el fragmento de HTML y úsalo tal cual — el atributo data-text debe coincidir con el texto visible del elemento para que el efecto funcione.

Ejemplo

Entrada

Texto: "GLITCH" · Color 1: #ff0040 (rojo) · Color 2: #00fff9 (cian) · Intensidad: 5px

Resultado

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

El texto base permanece blanco mientras sus dos copias en pseudo-elementos parpadean en rojo y cian a cada lado, produciendo el clásico aspecto de señal corrupta.

Por qué el elemento necesita un atributo data-text

Los pseudo-elementos ::before y ::after no pueden leer directamente el contenido de texto normal de un elemento — content: attr() en CSS solo funciona con atributos HTML reales, no con nodos de texto hijos. Por eso el HTML generado repite el texto como un atributo data-text="..." en el mismo elemento: el texto visible se renderiza normalmente, mientras que cada pseudo-elemento obtiene de forma independiente la misma cadena mediante content: attr(data-text) y superpone su propia copia animada y con color desplazado.

Cómo se produce el parpadeo

Cada pseudo-elemento se anima con su propio bloque @keyframes que recorre una serie de valores clip-path: inset(...). En cada fotograma clave se revela una franja horizontal distinta de la copia coloreada mientras el resto se recorta, así que el fragmento visible de rojo (o cian) salta verticalmente mientras se reproduce la animación — combinado con el desplazamiento de la sombra de color, esto se lee como canales de color desgarrados y desalineados en lugar de un brillo suave.

Dónde encaja este efecto

• Títulos principales en páginas de aterrizaje de videojuegos, cyberpunk, streaming o marcas musicales.
• Páginas de error / 404, donde un glitch refuerza la idea de 'algo se rompió'.
• Estados de hover o focus en un título o logo para un acento llamativo breve.
• Estados de carga o 'procesando', donde un glitch transmite actividad del sistema.
• Úsalo con moderación en texto de cuerpo — el efecto es intencionadamente difícil de leer de un vistazo, así que funciona mejor en títulos cortos o logotipos, no en párrafos.

Combinar con otras herramientas CSS

Un título glitch suele ser solo un elemento dentro de un diseño más amplio, oscuro y de alto contraste. Combínalo con una sombra suave o esquinas redondeadas de las otras herramientas CSS de abajo para un acabado más completo.

→ Generador de Box Shadow · Generador de Border Radius

Preguntas frecuentes