Generador de texto glitch CSS
Genera código CSS listo para un efecto de texto glitch
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Escribe tu texto y ajusta velocidad, intensidad, desplazamiento de color y tamaño de fuente para previsualizar el efecto glitch en vivo, y obtén el código HTML y CSS correspondiente. Es útil para diseñadores y desarrolladores front-end que quieren dar un toque retro o cyberpunk a un título de landing page o banner, y todo se procesa en el navegador sin enviar nada a un servidor.
Cómo usar
- Escribe el texto al que quieres aplicar el efecto glitch.
- Ajusta la velocidad, intensidad, desplazamiento de color, tamaño de fuente y los dos colores hasta lograr el aspecto deseado.
- Pulsa 🎲 Aleatorizar para probar un patrón de glitch distinto.
- Cuando te guste la vista previa, copia el código HTML + CSS y pégalo en tu proyecto.
Preguntas frecuentes
- ¿Dónde pego el código generado?
- Coloca el HTML donde quieras mostrarlo y el CSS en tu hoja de estilos o una etiqueta style. El atributo class y data-text del div deben contener exactamente el mismo texto para que el efecto funcione.
- ¿Cambia la animación si cambio el texto?
- No, el patrón de animación se genera a partir de un valor semilla independiente del contenido del texto. Usa el botón 🎲 Aleatorizar si quieres un patrón distinto.
- ¿Esta herramienta envía mi texto a un servidor?
- No, toda la entrada y configuración se procesa únicamente en tu navegador y no se envía a ningún lado.