Generador de texto glitch en CSS
Escribe un texto y obtén el código de la animación glitch en CSS
Escribe tu texto, ajusta velocidad, intensidad, desplazamiento de color y tamaño de fuente, y verás el efecto glitch en el navegador al momento, con el HTML y el CSS listos para copiar. Es una herramienta pensada para diseñadores y maquetadores que quieren dar un aire retro o ciberpunk al título de una landing o al banner de un evento. Todos los cálculos se realizan solo en tu navegador y nada se envía a un servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Escribe el texto que quieres mostrar con efecto glitch.
- Ajusta los deslizadores de velocidad, intensidad, desplazamiento de color y tamaño de fuente, además de los dos colores, hasta dar con el aspecto que buscas.
- Con el botón 🎲 Cambiar patrón puedes generar formas de glitch aleatorias.
- Cuando la vista previa te guste, copia el código HTML+CSS y pégalo en tu proyecto.
Preguntas frecuentes
- ¿Dónde pego el código generado?
- El HTML va donde quieras que aparezca el texto y el CSS en tu hoja de estilos o en una etiqueta style. El texto debe ser idéntico en el contenido del div y en su atributo data-text para que el efecto funcione.
- ¿Si cambio el texto cambia también la animación?
- No. El patrón de la animación se calcula a partir de una semilla y no depende del contenido del texto. Si solo quieres variar el patrón, pulsa el botón 🎲 Cambiar patrón.
- ¿Esta herramienta envía datos a algún servidor?
- No. El texto y los ajustes que introduces se procesan únicamente en tu navegador y no salen de él.