Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de texto glitch con CSS

CSS Text Glitch Effect Generator

Crea un glitch cromático de tres capas con desfase y cadencia ajustables para textos de hasta 32 caracteres, y copia el CSS con reduced-motion.

Ruta de la tarea / de la entrada al resultado

Escribe el texto de vista previa

Funciona en local · No se sube nada

Cómo funciona Generador de texto glitch con CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo crear un efecto glitch de texto en CSS

  1. 01

    Escribe el texto de vista previa

    Introduce de 1 a 32 caracteres en Texto de vista previa; el contador junto a la etiqueta sigue la longitud. Las palabras cortas y anchas se leen mejor cuando las capas empiezan a partirse.

  2. 02

    Define los tres colores

    Color del texto pinta la capa base, mientras Canal cian y Canal rojo son las réplicas desplazadas que producen el fleco cromático. Canales cercanos al cian y al rojo puros dan el aspecto cromático clásico; canales apagados producen una separación más sutil y moderna.

  3. 03

    Ajusta el movimiento del glitch

    Desfase de capas (1–12 px) define cuánto derivan las réplicas, y Duración del ciclo (0,2–3 s) fija la velocidad del bucle. La vista previa escenifica las tres capas en vivo.

  4. 04

    Entiende las tres capas

    El elemento base conserva tu Color del texto, mientras la réplica cian se recorta a la parte superior de la línea y la roja a la inferior. Cada réplica ejecuta una animación steps(2, end) — saltos bruscos en lugar de deslizamientos suaves — que es lo que hace que el glitch se sienta como interferencia de señal.

  5. 05

    Copia el CSS del glitch

    Pulsa Copiar CSS o Descargar .css para guardar toolars-text-glitch.css. La exportación incluye un bloque de prefers-reduced-motion que conserva un fleco estático para las personas sensibles al movimiento. El panel de salida muestra el recuento de bytes en vivo, y ambas acciones permanecen desactivadas mientras el texto no pase la validación.

  6. 06

    Añade el atributo data-text

    Las réplicas leen su contenido de attr(data-text), así que tu elemento necesita un atributo data-text idéntico a su texto visible. Cuando el texto cambie después, actualiza ambos: el atributo es lo que las capas cian y roja pintan de verdad. El atributo vive en el mismo elemento que la clase, así que todo el efecto sigue siendo una sola etiqueta.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de texto glitch con CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de texto glitch con CSS en realidad

Un overlay de streaming quiere un título que crepita, una página 404 necesita la dosis justa de inquietud, una pantalla de bienvenida de conferencia busca energía de terminal retro. La tipografía glitch es fácil de exagerar, y por eso el desfase y la duración se mantienen acotados — y como el efecto se compone en esta pestaña, un logotipo sin lanzar nunca sale de la máquina mientras se somete a pruebas. Las palabras cortas a tamaños grandes llevan mejor el efecto, así que prueba el titular real y no texto de relleno. Los @keyframes exportados conservan el desfase y la cadencia exactos que elegiste.

Preguntas frecuentes

¿Qué marcado necesita el efecto?
Un elemento con la clase .glitch y un atributo data-text idéntico a su contenido de texto. Las réplicas ::before y ::after se pintan desde ese atributo y luego se recortan a la mitad superior e inferior de la línea.
¿Cuáles son los límites del texto?
Texto de vista previa acepta de 1 a 32 caracteres, con un contador en vivo junto al campo. El texto vacío o cualquier exceso sobre el límite falla la validación y muestra el estado REVISA LOS VALORES hasta que se corrige.
¿Cómo se comporta para usuarios con reduced-motion?
La exportación incluye un bloque de prefers-reduced-motion que detiene ambas animaciones y baja las réplicas al 45% de opacidad, dejando un fleco cromático estático en lugar de uno en movimiento. El texto base queda intacto en ambos casos, así que el mensaje se lee igual en los dos modos.
¿Por qué la animación salta en lugar de deslizarse?
Las dos animaciones de las réplicas usan steps(2, end), que hace saltar la transformación entre posiciones discretas en lugar de interpolar suavemente. Ese paso duro es la firma de la estética de interferencia de señal; Desfase de capas define la distancia de cada salto.
¿Qué valores de desfase y duración funcionan bien?
Desfases de 1–3 px con un ciclo cercano al segundo se leen como estática sutil y convienen a titulares que deben seguir siendo legibles. Sube a 8–12 px con un ciclo más rápido solo para palabras decorativas cortas; los valores predeterminados de 4 px y 0,85 s quedan en un punto intermedio seguro.
¿El texto que escribo se envía a algún sitio?
No. El efecto se renderiza localmente en la pestaña actual del navegador, no hace falta cuenta, y el texto nunca entra en almacenamiento, registros o la red. Pulsa Restablecer para recuperar el ejemplo predeterminado.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear