Glitch Effect
Deux pseudo-éléments CSS découpés par clip-path en bandes horizontales et colorés en magenta/cyan créent une distorsion numérique cyberpunk — pur CSS, sans canvas ni JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur deux pseudo-éléments ::before et ::after qui dupliquent le texte via content: attr(data-text). Positionnés en absolute sur l'élément parent (position: relative), ils se superposent exactement au texte original. Chacun est ensuite découpé par un clip-path: polygon(…) : ::before expose uniquement la tranche supérieure (0–35 % de hauteur), ::after uniquement la tranche inférieure (65–100 %).
Chaque copie reçoit une couleur de chromatic aberration distincte : magenta (#f0f) pour le haut, cyan (#0ff) pour le bas. Deux jeux de @keyframes — glitch1 et glitch2 — appliquent des translations XY de ±3 px en cinq étapes irrégulières. Le déplacement horizontal simule le tearing d'un signal vidéo corrompu, les sauts verticaux amplifient l'impression de perte de synchronisation.
Les deux animations tournent à des vitesses délibérément différentes (2 s pour glitch1, 3 s pour glitch2) et en mode alternate-reverse, ce qui les désynchronise en permanence. Ce déphasage naturel évite tout effet de répétition mécanique : la distorsion paraît aléatoire sans aucune ligne de JavaScript.
Le texte source (blanc, .text-glitch lui-même) reste immobile — seules les copies colorées bougent, ce qui garantit une lisibilité permanente entre les frames de glitch. La classe .demo-text fixe la typographie de base (taille, graisse, espacement) indépendamment de l'effet, ce qui permet d'appliquer .text-glitch à tout élément texte existant en ajoutant simplement l'attribut data-text.
Accessibilité
- Pas de prefers-reduced-motion dans ce code : les animations tournent en continu quelle que soit la préférence système. Pour un déploiement accessible, ajoutez
@media (prefers-reduced-motion: reduce) { .text-glitch::before, .text-glitch::after { animation: none; } }. - Les pseudo-éléments utilisent
content: attr(data-text): certains lecteurs d'écran (NVDA, JAWS) liront le texte deux ou trois fois. Ajoutezaria-hidden="true"sur l'élément.text-glitchet un<span class="sr-only">séparé pour le texte accessible. - Contraste du texte principal : blanc (
#fff) sur fond#0a0a0f— ratio > 15:1, bien au-delà de WCAG AA (4,5:1) et AAA (7:1). - L'effet est purement décoratif : aucune interaction, aucun focus, aucun élément clavier à gérer.
- Compatible avec les couleurs forcées (
forced-colors: active) : les couleurs des pseudo-éléments sont remplacées par la couleur système — le texte blanc d'origine reste lisible.
Compatibilité navigateur
Nécessite clip-path polygon et CSS animations — disponibles dans tous les navigateurs modernes depuis 2018.
Sans support <code>clip-path</code> (IE 11, vieux Android < 5), les pseudo-éléments s'affichent sans découpe — le texte magenta et cyan apparaît superposé sans animation de glitch. Le texte blanc d'origine reste lisible en toutes circonstances.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<span class="demo-text text-glitch" data-text="VOTRE TEXTE">VOTRE TEXTE</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| data-text="…" | GLITCH | Texte affiché par les pseudo-éléments — doit correspondre exactement au textContent de l'élément pour aligner les trois couches. |
| .text-glitch::before { color } | #f0f | Couleur de la bande supérieure (chromatic aberration haut). Remplacez par n'importe quelle couleur néon ou brand. |
| .text-glitch::after { color } | #0ff | Couleur de la bande inférieure. En général complémentaire du ::before pour l'effet d'aberration chromatique. |
| clip-path ::before | polygon(0 0, 100% 0, 100% 35%, 0 35%) | Hauteur de la bande supérieure. Augmentez 35 % à 45–50 % pour une bande plus large, ou réduisez à 20 % pour une fine ligne de tearing. |
| clip-path ::after | polygon(0 65%, 100% 65%, 100% 100%, 0 100%) | Point de départ de la bande inférieure. Le gap 35–65 % est la zone sans glitch — réduisez-le pour un glitch plus agressif (ex. 45/55 %). |
| animation-duration ::before | 2s | Vitesse du glitch supérieur. 0,5–1 s = nerveux, 4–6 s = lent et onirique. |
| animation-duration ::after | 3s | Vitesse du glitch inférieur. L'écart de durée entre ::before et ::after est clé : plus il est grand, plus le déphasage paraît aléatoire. |
| translate dans @keyframes glitch1/2 | ±3px | Amplitude du décalage XY en pixels. 1–2 px = subtil, 5–8 px = glitch extrême façon corruption vidéo. |
| .demo-text { font-size } | 2.5rem | Taille du texte. L'effet est plus spectaculaire à partir de 3–4 rem sur fond sombre pleine largeur. |
FAQ
@keyframes appliquent transform: translate() uniquement sur les pseudo-éléments ::before et ::after, jamais sur l'élément parent. Le texte blanc d'origine (.text-glitch lui-même) reste parfaitement fixe — seules les copies colorées bougent, créant l'illusion de déchirure sans affecter le flux ni le layout.text-glitch à autant d'éléments que voulu. Chaque élément doit porter un attribut data-text avec le même texte que son textContent — c'est ce que lit content: attr(data-text). Les animations CSS s'appliquent automatiquement à toutes les instances, sans aucune initialisation JavaScript.clip-path en pourcentages (35 % / 65 %) s'appliquent à la hauteur totale de l'élément. Sur un bloc multiligne, les bandes couvrent les premières et dernières lignes mais laissent les lignes intermédiaires sans glitch. Pour un rendu optimal, appliquez .text-glitch à un <span> sur une seule ligne, ou découpez le texte en plusieurs éléments séparés.
