Generador de Glitch CSS - Crear Efectos de Texto Glitch en Línea
Genera animaciones de texto glitch en CSS puro con vista previa en vivo. Personaliza efectos de división de color, ruido y transformación con controles de intensidad — 100% del lado del cliente, sin envío de datos al servidor.
Preguntas Frecuentes
¿Qué es un efecto de texto glitch CSS?
Un efecto de texto glitch CSS es una animación puramente visual que hace que el texto parezca funcionar mal o tener un fallo, imitando la corrupción de señales digitales o artefactos de cintas VHS. Se logra mediante técnicas CSS como el recorte clip-path, la división de canales de color usando pseudo-elementos ::before/::after con posiciones desplazadas, y la distorsión transform: skew(), todo animado con @keyframes. No se requiere JavaScript para el resultado generado.
¿Cómo uso este generador de texto glitch CSS?
Ingresa el texto al que quieres aplicar el efecto glitch. Elige un tipo de efecto (División de color, Ruido, Transformación o Combinado). Ajusta la intensidad y velocidad de animación con los controles deslizantes. Personaliza los colores de texto, fondo y los dos colores de glitch. Visualiza el efecto en tiempo real en el área de vista previa. Copia el código HTML y CSS generado a tu proyecto.
¿Mis datos están seguros al usar esta herramienta?
Sí. Esta herramienta se ejecuta completamente en tu navegador usando JavaScript del lado del cliente. No se envían contenidos de texto, valores de color ni código CSS generado a ningún servidor. Todo el procesamiento ocurre localmente en tu dispositivo.
¿Cómo funciona la técnica de glitch clip-path?
La técnica de ruido clip-path crea un aspecto de corrupción digital cambiando rápidamente qué franjas horizontales del texto son visibles. Usando @keyframes, el valor clip-path: inset() se anima a través de múltiples posiciones aleatorias, haciendo que diferentes bandas horizontales de texto aparezcan y desaparezcan, simulando corrupción de datos.
¿Cómo creo un efecto glitch cyberpunk/neón?
Usa el tipo de efecto División de color (RGB) con cian (#00ffff) y magenta (#ff00ff) como tus dos colores de glitch sobre un fondo oscuro. Establece la intensidad en 5-7. El preset Cyberpunk Neón en la pestaña de Presets lo aplica automáticamente con un clic.
¿Puedo hacer el efecto glitch accesible?
Sí. Puedes envolver la animación CSS generada en un bloque @media (prefers-reduced-motion: reduce) para desactivarla para usuarios que prefieren movimiento reducido. Además, asegúrate de que el texto subyacente sea legible sin la animación para lectores de pantalla.
¿Cuál es la diferencia entre los efectos División de color, Ruido y Transformación?
División de color (RGB) crea aberración cromática desplazando copias de pseudo-elementos coloreados horizontalmente. Ruido (Clip-path) usa clip-path: inset() animado para cortar y revelar aleatoriamente diferentes bandas horizontales. Transformación (Skew) aplica transform: skew() y translate() animados para un efecto de distorsión con temblor. Combinado fusiona las tres técnicas para máximo impacto visual.
Ejemplos de Código
// Generate CSS glitch effect - Color Split technique
function generateColorSplitGlitch(config) {
const { text, fontSize, textColor, bgColor, color1, color2, duration } = config;
const html = `<div class="glitch-wrapper">
<div class="glitch" data-text="${text}">${text}</div>
</div>`;
const css = `.glitch-wrapper {
display: flex;
align-items: center;
justify-content: center;
background: ${bgColor};
padding: 2rem;
}
.glitch {
position: relative;
font-size: ${fontSize}px;
font-weight: 700;
color: ${textColor};
letter-spacing: 0.05em;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: ${color1};
animation: glitch-before ${duration}s infinite linear alternate-reverse;
clip-path: inset(0 0 0 0);
}
.glitch::after {
color: ${color2};
animation: glitch-after ${duration}s infinite linear alternate-reverse;
clip-path: inset(0 0 0 0);
}
@keyframes glitch-before {
0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -1px); }
20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, 2px); }
40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 3px); }
60% { clip-path: inset(25% 0 58% 0); transform: translate(3px, 1px); }
80% { clip-path: inset(54% 0 7% 0); transform: translate(-3px, -2px); }
100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -3px); }
}
@keyframes glitch-after {
0% { clip-path: inset(65% 0 13% 0); transform: translate(2px, 1px); }
20% { clip-path: inset(79% 0 2% 0); transform: translate(-2px, -1px); }
40% { clip-path: inset(48% 0 38% 0); transform: translate(1px, -2px); }
60% { clip-path: inset(3% 0 83% 0); transform: translate(-1px, 3px); }
80% { clip-path: inset(22% 0 64% 0); transform: translate(3px, 2px); }
100% { clip-path: inset(10% 0 74% 0); transform: translate(-2px, 1px); }
}`;
return { html, css };
}
// Generate noise/clip-path keyframes with controllable intensity
function generateNoiseKeyframes(name, intensity, steps = 20) {
let keyframes = `@keyframes ${name} {\n`;
for (let i = 0; i <= steps; i++) {
const percent = Math.round((i / steps) * 100);
const maxClip = intensity * 10;
const top = Math.floor(Math.random() * maxClip);
const bottom = Math.floor(Math.random() * maxClip);
keyframes += ` ${percent}% { clip-path: inset(${top}% 0 ${bottom}% 0); }\n`;
}
keyframes += '}';
return keyframes;
}
// Usage
const result = generateColorSplitGlitch({
text: 'GLITCH',
fontSize: 80,
textColor: '#ffffff',
bgColor: '#0a0a0a',
color1: '#00ffff',
color2: '#ff00ff',
duration: 2,
});
console.log(result.html);
console.log(result.css);