Aller au contenu
Toolars
Explorer

Générateur de texte glitch en CSS

CSS Text Glitch Effect Generator

Régler texte, taille, couleurs décalées, tremblement et durée ; le CSS respecte la réduction du mouvement.

Traitement local

Détails du traitement

Les données de l’outil sont traitées sur votre appareil.

Des ressources peuvent être téléchargées pour cet outil. Les services de compte sont distincts.

Informations sur la confidentialité
Signaler un bug

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

    Texte d’aperçu · Taille de police · Effet · Décalage RVB / Secousse

  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. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.

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. Régler texte, taille, couleurs décalées, tremblement et durée ; le CSS respecte la réduction du mouvement. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.
Quelles sont les limites du texte ?
Texte d’aperçu: 1–120. Vérifiez source, commandes et validation avant l’export. Un résultat invalide ne peut pas être exporté.
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.

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

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

Générateur de cases à cocher CSS

CSS Checkbox Generator

24 modèles de cases : huit marques × trois transitions ; tester l’aperçu natif au clic ou avec Espace.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

18 modèles d’interrupteurs : six curseurs × trois transitions ; tester au clic ou au clavier.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

24 formes de découpe, paramètres et points de polygone modifiables ; exporter CSS ou une déclaration.

Créer