Generátor CSS glitch textu

Čo je tento nástroj?

CSS glitch efekt napodobňuje vzhľad porušeného vysielacieho signálu alebo roztrhanej VHS pásky tak, že zdvojí kus textu pomocou pseudo-elementov ::before a ::after, mierne posunie každú kópiu farebným text-shadow (klasicky červená a azúrová, echo signálových chýb analógového RGB signálu), a animuje clip-path každej kópie pomocou @keyframes tak, že rôzne vodorovné pásy každej farebnej kópie blikajú v čase.

Technika nepotrebuje obrázky, žiadnu JavaScriptovú animačnú slučku ani canvas — je to čisté CSS vrstvené na jedinom HTML elemente, ktorý nesie svoj text dvakrát: raz ako skutočný textový obsah a raz cez atribút data-text, ktorý pseudo-elementy čítajú pomocou content: attr(data-text).

Zdroj: CSS Pseudo-Elements Module Level 4, W3C — definuje pseudo-elementy ::before/::after a funkciu attr(), z ktorých je tento efekt postavený.

Prečo ho používať?

• Živý animovaný náhľad — sledujte skutočný glitch efekt počas písania a úprav nastavení, nielen statický náhľad.
• Dve nezávisle nastaviteľné akcentové farby, predvolene klasický červeno-azúrový RGB-split vzhľad, no prispôsobiteľné akejkoľvek značke či téme.
• Posuvník intenzity ovláda posun farebného tieňa v pixeloch; posuvník rýchlosti ovláda, ako rýchlo sa cyklujú keyframes clip-path.
• Skopíruje CSS (vrátane kompletných blokov @keyframes) aj presnú potrebnú HTML štruktúru, keďže efekt závisí od atribútu data-text zodpovedajúceho viditeľnému textu.
• Čisté CSS — po nasadení na vašu stránku nie je potrebný žiadny JavaScript, žiadne externé knižnice ani obrázky na načítanie.
• Zadarmo, bez registrácie, beží celé vo vašom prehliadači.

Ako sa používa

1. Napíšte text, ktorý chcete zglitchovať, do textového poľa — okamžite sa aktualizuje živý náhľad.
2. Vyberte dve akcentové farby; klasická predvoľba je červená a azúrová pre retro RGB-split vzhľad, ale funguje aj akákoľvek iná dvojica kontrastných farieb.
3. Upravte posuvník intenzity a ovládajte, ako ďaleko od seba obe farebné vrstvy sedia — vyššie hodnoty pôsobia agresívnejšie.
4. Upravte posuvník rýchlosti a ovládajte, ako rýchlo glitch bliká.
5. Skopírujte blok CSS a vložte ho do svojho štýlopisu.
6. Skopírujte HTML úryvok a použite ho presne tak, ako je zobrazený — atribút data-text musí zodpovedať viditeľnému textu elementu, aby efekt fungoval.

Príklad

Vstup

Text: "GLITCH" · Farba 1: #ff0040 (červená) · Farba 2: #00fff9 (azúrová) · Intenzita: 5px

Výstup

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

Základný text zostáva biely, zatiaľ čo jeho dve pseudo-elementové kópie blikajú červenou a azúrovou na oboch stranách, čím vzniká klasický vzhľad poškodeného signálu.

Prečo element potrebuje atribút data-text

Pseudo-elementy ::before a ::after nedokážu priamo čítať bežný textový obsah elementu — CSS content: attr() funguje iba so skutočnými HTML atribútmi, nie s textovými uzlami potomkov. Preto vygenerovaný HTML kód opakuje text ako atribút data-text="..." na tom istom elemente: viditeľný text sa vykresľuje normálne, zatiaľ čo každý pseudo-element nezávisle preberá rovnaký reťazec cez content: attr(data-text) a vrství naň vlastnú farebne posunutú, animovanú kópiu.

Ako vzniká blikanie

Každý pseudo-element je animovaný vlastným blokom @keyframes, ktorý prechádza sériou hodnôt clip-path: inset(...). Pri každom keyframe sa odhalí iný vodorovný pás farebnej kópie, zatiaľ čo zvyšok je odseknutý, takže viditeľný prúžok červenej (alebo azúrovej) skáče vertikálne počas prehrávania animácie — v kombinácii s farebným posunom text-shadow to pôsobí ako roztrhané, nezarovnané farebné kanály, nie ako plynulá žiara.

Kde sa tento efekt hodí

• Hero nadpisy na herných, kyberpunkových, streamovacích alebo hudobných landing stránkach značiek.
• Chybové stránky 404, kde glitch podporuje tému 'niečo sa pokazilo'.
• Stavy hover alebo focus na nadpise alebo logu pre krátky akcent priťahujúci pozornosť.
• Stavy načítavania alebo 'spracovávania', kde glitch vyjadruje aktivitu systému.
• Používajte striedmo na bežnom texte — efekt je zámerne ťažšie čitateľný na prvý pohľad, takže funguje najlepšie na krátkych nadpisoch alebo logotype, nie na odsekoch.

Kombinácia s ďalšími CSS nástrojmi

Glitch nadpis je často iba jeden prvok vo väčšom tmavom, vysoko kontrastnom layoute. Skombinujte ho s jemným žiariacim tieňom alebo zaoblenými hranami karty z ďalších CSS nástrojov nižšie pre komplexnejší vzhľad.

→ Generátor box-shadow · Generátor border-radius

Časté otázky