Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de texte glitch en CSS

CSS Text Glitch Effect Generator

Créez un glitch typographique à trois couches — franges cyan et rouge en pas steps() — décalage et cadence réglables, repli statique en mouvement réduit.

Parcours de la tâche / de l'entrée au résultat

Saisissez le texte d'aperçu

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de texte glitch en CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment créer un effet de glitch de texte en CSS

  1. 01

    Saisissez le texte d'aperçu

    Entrez 1 à 32 caractères dans Texte d'aperçu — le compteur à côté du libellé suit la longueur. Les mots courts et larges se lisent le mieux une fois que les couches commencent à se séparer.

  2. 02

    Définissez les trois couleurs

    Couleur du texte peint la couche de base, tandis que Canal cyan et Canal rouge sont les répliques décalées qui produisent la frange chromatique. Des canaux proches du cyan et du rouge purs donnent l'aspect chromatique classique ; des canaux assourdis produisent une séparation plus subtile et moderne.

  3. 03

    Réglez le mouvement du glitch

    Décalage des couches (1–12 px) définit la distance de dérive des répliques, et Durée de cycle (0.2–3 s) définit la vitesse de la boucle. L'aperçu met en scène les trois couches en direct.

  4. 04

    Comprenez les trois couches

    L'élément de base garde votre Couleur du texte, tandis que la réplique cyan est rognée sur le haut de la ligne et la rouge sur le bas. Chaque réplique exécute une animation steps(2, end) — des sauts francs au lieu de glissements doux — ce qui donne au glitch son allure d'interférence de signal.

  5. 05

    Copiez le CSS du glitch

    Cliquez sur Copier le CSS ou Télécharger le .css pour enregistrer toolars-text-glitch.css. Un bloc prefers-reduced-motion est inclus dans l'export et garde une frange statique pour les visiteurs sensibles au mouvement. Le panneau de sortie affiche le nombre d'octets en direct, et les deux actions restent désactivées tant que le texte échoue à la validation.

  6. 06

    Ajoutez l'attribut data-text

    Les répliques lisent leur contenu depuis attr(data-text), donc votre élément a besoin d'un attribut data-text identique à son texte visible. Quand le texte change ensuite, mettez à jour les deux — c'est l'attribut que les couches cyan et rouge peignent réellement. L'attribut vit sur le même élément que la classe, donc tout l'effet tient en une seule balise.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de texte glitch en CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de texte glitch en CSS fait vraiment

Une surcouche de stream veut un titre qui crépite, une page 404 a besoin de juste assez de menace, un écran d'ouverture de conférence vise une énergie rétro-terminal. Le glitch typographique est facile à en faire trop, c'est pourquoi le décalage et la durée restent bornés — et comme l'effet est composé dans cet onglet, un logotype non publié ne quitte jamais la machine pendant qu'on le teste sous pression. Les mots courts en grand format portent le mieux l'effet, donc testez le vrai titre plutôt qu'un texte de remplissage. Les keyframes exportées conservent le décalage et la cadence exacts sur lesquels vous vous êtes arrêté.

Questions fréquentes

Quel balisage l'effet demande-t-il ?
Un élément avec la classe .glitch et un attribut data-text identique à son contenu texte. Les répliques ::before et ::after sont peintes à partir de cet attribut, puis rognées sur les moitiés supérieure et inférieure de la ligne.
Quelles sont les limites du texte ?
Texte d'aperçu accepte de 1 à 32 caractères, avec un compteur en direct à côté du champ. Un texte vide ou au-delà de la limite échoue à la validation et affiche l'état VÉRIFIER LES VALEURS jusqu'à correction.
Comment se comporte-t-il pour les utilisateurs en mouvement réduit ?
L'export inclut un bloc prefers-reduced-motion qui arrête les deux animations et fait passer les répliques à 45 % d'opacité, laissant une frange chromatique statique au lieu d'une frange en mouvement. Le texte de base est intact dans les deux cas, donc le message reste lisible dans les deux modes.
Pourquoi l'animation saute-t-elle au lieu de glisser ?
Les deux animations de répliques utilisent steps(2, end), qui fait basculer la transformation entre des positions discrètes au lieu d'interpoler en douceur. Ce pas à pas franc est la signature de l'esthétique d'interférence de signal ; Décalage des couches définit la distance de chaque saut.
Quelles valeurs de décalage et de durée fonctionnent bien ?
Des décalages de 1 à 3 px avec un cycle proche d'une seconde se lisent comme un parasites subtil et conviennent aux titres qui doivent rester lisibles. Ne poussez vers 8–12 px avec un cycle plus rapide que pour de courts mots décoratifs ; les valeurs par défaut de 4 px et 0.85 s se situent prudemment entre les deux.
Le texte que je saisis est-il envoyé quelque part ?
Non. L'effet est rendu localement dans l'onglet actuel du navigateur, aucun compte n'est requis, et le texte n'entre jamais dans le stockage, les journaux ou le réseau. Cliquez sur Réinitialiser pour restaurer l'exemple par défaut.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer