Generátor CSS Text Glitch

Co je tento nástroj?

CSS glitch efekt napodobuje vzhled poškozeného vysílacího signálu nebo roztrhané VHS pásky duplikováním kusu textu dvakrát pomocí pseudo-elementů ::before a ::after, mírným posunutím každé kopie barevným text-shadow (klasicky červená a azurová, odkazující na analogové chyby RGB signálu), a animací clip-path každé kopie pomocí @keyframes, takže různé vodorovné pásy každé barevné kopie blikají v čase.

Technika nepotřebuje žádné obrázky, žádnou JavaScriptovou animační smyčku ani plátno — je to čisté CSS vrstvené na jediném HTML elementu, který nese svůj vlastní text dvakrát: jednou jako skutečný textový obsah a jednou přes atribut data-text, který pseudo-elementy čtou pomocí content: attr(data-text).

Zdroj: CSS Pseudo-Elements Module Level 4, W3C — definuje pseudo-elementy ::before/::after a funkci attr(), na které je tento efekt postavený.

Proč ho používat?

• Živý animovaný náhled — vidíte skutečný efekt glitche, jak píšete a upravujete nastavení, ne jen statický mockup.
• Dvě nezávisle upravitelné akcentové barvy, ve výchozím nastavení klasický vzhled červená/azurová RGB-split, ale přizpůsobitelné jakékoli značce nebo tématu.
• Posuvník intenzity řídí odsazení barevného stínu v pixelech; posuvník rychlosti řídí, jak rychle se cyklí klíčové snímky clip-path.
• Kopíruje jak CSS (včetně kompletních bloků @keyframes), tak přesnou potřebnou HTML strukturu, protože efekt závisí na atributu data-text odpovídajícím viditelnému textu.
• Čistě CSS — žádný JavaScript není za běhu potřeba, jakmile je na vaší stránce, a žádné externí knihovny nebo obrázky k načtení.
• Zdarma, bez registrace, běží kompletně ve vašem prohlížeči.

Jak se používá

1. Napište text, který chcete zglitchovat, do textového pole — okamžitě aktualizuje živý náhled.
2. Vyberte dvě akcentové barvy; klasická výchozí volba je červená a azurová pro retro RGB-split vzhled, ale fungují jakékoli dvě kontrastní barvy.
3. Upravte posuvník intenzity, abyste ovládli, jak daleko od sebe obě barevné vrstvy sedí — vyšší hodnoty se čtou jako agresivnější glitch.
4. Upravte posuvník rychlosti, abyste ovládli, jak rychle glitch bliká.
5. Zkopírujte blok CSS a vložte ho do svého stylopisu.
6. Zkopírujte HTML úryvek a použijte ho přesně tak, jak je zobrazen — atribut data-text musí odpovídat viditelnému textu elementu, aby efekt fungoval.

Příklad

Vstup

Text: "GLITCH" · Barva 1: #ff0040 (červená) · Barva 2: #00fff9 (azurová) · 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 zůstává bílý, zatímco jeho dvě kopie pseudo-elementů blikají červeně a azurově po stranách, což vytváří klasický vzhled poškozeného signálu.

Proč element potřebuje atribut data-text

Pseudo-elementy ::before a ::after nedokáží přímo číst běžný textový obsah elementu — CSS content: attr() funguje pouze se skutečnými HTML atributy, ne s textovými uzly potomků. To je důvod, proč vygenerované HTML opakuje text jako atribut data-text="..." na stejném elementu: viditelný text se vykresluje normálně, zatímco každý pseudo-element nezávisle čerpá stejný řetězec přes content: attr(data-text) a vrství svou vlastní barevně posunutou, animovanou kopii navrch.

Jak vzniká blikání

Každý pseudo-element je animovaný vlastním blokem @keyframes, který prochází sérií hodnot clip-path: inset(...). U každého klíčového snímku se odhalí jiný vodorovný pás barevné kopie, zatímco zbytek je oříznut, takže viditelný proužek červené (nebo azurové) v průběhu animace skáče vertikálně — v kombinaci s barevným posunem text-shadow se to čte jako roztrhané, nesouhlasné barevné kanály místo plynulé záře.

Kde se tento efekt hodí

• Hlavní nadpisy na herních, kyberpunkových, streamovacích nebo hudebních landing pages.
• Stránky 404 / chybové stránky, kde glitch podtrhuje téma 'něco se rozbilo'.
• Stavy hover nebo focus na nadpisu nebo logu pro krátký akcent přitahující pozornost.
• Stavy načítání nebo 'zpracování', kde glitch vyjadřuje aktivitu systému.
• Používejte střídmě na běžný text — efekt je záměrně na první pohled hůř čitelný, takže funguje nejlépe u krátkých nadpisů nebo loga, ne odstavců.

Kombinace s dalšími CSS nástroji

Glitch nadpis je často jen jeden element ve větším tmavém, vysoce kontrastním layoutu. Kombinujte ho s jemným svítícím stínem nebo zaoblenými hranami karty z dalších CSS nástrojů níže pro propracovanější vzhled.

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

Časté dotazy