Générateur de Texte Glitch CSS

Cet outil construit un effet de texte glitch animé à séparation de couleur RGB en CSS pur, à l'aide de deux pseudo-éléments dupliqués dont la couleur tremble et se décale derrière votre texte. Saisissez votre texte, choisissez deux couleurs d'accent, ajustez l'intensité et la vitesse du glitch, regardez l'animation en direct, puis copiez à la fois le CSS généré et la petite structure HTML nécessaire.

En quoi consiste cet outil ?

Un effet glitch en CSS imite l'aspect d'un signal de diffusion corrompu ou d'une bande VHS abîmée en dupliquant un texte deux fois via les pseudo-éléments ::before et ::after, en décalant légèrement chaque copie avec une ombre de texte colorée (classiquement rouge et cyan, en écho aux erreurs de signal RVB analogique), et en animant le clip-path de chaque copie avec @keyframes pour que différentes tranches horizontales de chaque copie colorée clignotent au fil du temps.

La technique ne nécessite ni image, ni boucle d'animation JavaScript, ni canvas — c'est du CSS pur superposé sur un seul élément HTML qui porte son propre texte deux fois : une fois comme contenu de texte réel, et une fois via un attribut data-text que les pseudo-éléments lisent avec content: attr(data-text).

Source : CSS Pseudo-Elements Module Level 4, W3C — définit les pseudo-éléments ::before/::after et la fonction attr() sur lesquels repose cet effet.

Pourquoi l'utiliser ?

Aperçu animé en direct — voyez le véritable effet glitch pendant que vous tapez et ajustez les réglages, pas juste une maquette statique.
Deux couleurs d'accent réglables indépendamment, avec par défaut le classique rouge/cyan mais personnalisables pour n'importe quelle marque ou thème.
Le curseur d'intensité contrôle le décalage en pixels de l'ombre colorée ; le curseur de vitesse contrôle la rapidité du cycle des keyframes du clip-path.
Copie à la fois le CSS (y compris les blocs @keyframes complets) et la structure HTML exacte nécessaire, car l'effet dépend d'un attribut data-text correspondant au texte visible.
CSS pur — aucun JavaScript nécessaire à l'exécution une fois sur votre page, et aucune bibliothèque externe ni image à charger.
Gratuit, sans inscription, fonctionne entièrement dans votre navigateur.

Mode d'emploi

Tapez le texte que vous voulez rendre glitché dans le champ de texte — l'aperçu se met à jour immédiatement.
Choisissez deux couleurs d'accent ; le classique par défaut est rouge et cyan pour un look rétro à séparation RVB, mais deux couleurs contrastées fonctionnent tout aussi bien.
Ajustez le curseur d'intensité pour contrôler l'écart entre les deux couches de couleur — des valeurs plus élevées se lisent comme un glitch plus agressif.
Ajustez le curseur de vitesse pour contrôler la rapidité du clignotement.
Copiez le bloc CSS et collez-le dans votre feuille de style.
Copiez l'extrait HTML et utilisez-le tel quel — l'attribut data-text doit correspondre exactement au texte visible de l'élément pour que l'effet fonctionne.

Exemple

Entrée

Texte : "GLITCH" · Couleur 1 : #ff0040 (rouge) · Couleur 2 : #00fff9 (cyan) · Intensité : 5px

Résultat

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

Le texte de base reste blanc pendant que ses deux copies en pseudo-éléments clignotent en rouge et cyan de part et d'autre, produisant le look classique de signal corrompu.

Pourquoi l'élément a besoin d'un attribut data-text

Les pseudo-éléments ::before et ::after ne peuvent pas lire directement le contenu texte normal d'un élément — content: attr() en CSS ne fonctionne qu'avec de vrais attributs HTML, pas avec des nœuds de texte enfants. C'est pourquoi le HTML généré répète le texte comme attribut data-text="..." sur le même élément : le texte visible s'affiche normalement, tandis que chaque pseudo-élément récupère indépendamment la même chaîne via content: attr(data-text) et superpose sa propre copie animée et décalée en couleur.

Comment le clignotement est produit

Chaque pseudo-élément est animé avec son propre bloc @keyframes qui parcourt une série de valeurs clip-path: inset(...). À chaque image clé, une bande horizontale différente de la copie colorée est révélée pendant que le reste est masqué, si bien que le fragment visible de rouge (ou de cyan) saute verticalement pendant l'animation — combiné au décalage de l'ombre colorée, cela se lit comme des canaux de couleur déchirés et désalignés plutôt qu'une simple lueur.

Où cet effet trouve sa place

Titres principaux sur des pages d'accueil gaming, cyberpunk, streaming ou de marques musicales.
Pages d'erreur / 404, où un glitch renforce le thème 'quelque chose a cassé'.
États de survol ou de focus sur un titre ou un logo pour un accent bref et accrocheur.
États de chargement ou de 'traitement en cours', où un glitch traduit une activité système.
À utiliser avec parcimonie sur le texte courant — l'effet est volontairement difficile à lire d'un coup d'œil, il fonctionne donc mieux sur des titres courts ou un logotype, pas sur des paragraphes.

Association avec d'autres outils CSS

Un titre glitché n'est souvent qu'un élément dans une mise en page sombre et à fort contraste plus large. Associez-le à une ombre douce ou des coins arrondis provenant des autres outils CSS ci-dessous pour un rendu plus abouti.

→ Générateur de Box Shadow · Générateur de Border Radius

Foire aux questions

Pourquoi le rouge et le cyan sont-ils les couleurs par défaut ?

Le rouge et le cyan imitent le désalignement classique des canaux RVB observé dans les vidéos analogiques corrompues et les premières erreurs de signal numérique, d'où vient à l'origine le langage visuel de l'effet 'glitch'. Vous pouvez utiliser n'importe quelles deux couleurs, mais des teintes fortement contrastées se lisent le plus clairement comme une séparation de couleur.

Cet effet nécessite-t-il du JavaScript ?

Non — une fois le CSS sur votre page, le glitch est une animation CSS pure pilotée par @keyframes. JavaScript n'est utilisé que par cet outil lui-même, dans votre navigateur, pour mettre à jour l'aperçu en direct et générer le code copiable.

Pourquoi l'effet n'apparaît-il pas quand je colle le CSS dans mon projet ?

La cause la plus fréquente est un attribut data-text manquant ou non correspondant. Les pseudo-éléments affichent la chaîne présente dans data-text="..." sur l'élément, pas le contenu texte propre de l'élément, donc les deux doivent être définis et correspondre exactement, y compris la casse.

Puis-je appliquer cet effet à un titre comme h1 plutôt qu'à un div ?

Oui — la technique fonctionne sur tout élément en ligne ou de bloc acceptant les pseudo-éléments ::before/::after et un attribut data-text. Appliquez simplement la même classe et le même attribut data-text à votre h1, span ou autre élément à la place d'un div.

Un effet glitch prononcé nuit-il à l'accessibilité ou au SEO ?

Le contenu textuel sous-jacent reste du vrai texte sélectionnable, donc les lecteurs d'écran et les moteurs de recherche le lisent normalement, indépendamment de l'animation visuelle. Pour les utilisateurs sensibles aux mouvements clignotants, pensez à respecter prefers-reduced-motion pour désactiver ou ralentir l'animation dans ce cas.