Generator Tekstu Glitch CSS

Czym jest to narzędzie?

Efekt glitch w CSS naśladuje wygląd uszkodzonego sygnału transmisyjnego lub porysowanej taśmy VHS poprzez zdublowanie tekstu dwukrotnie za pomocą pseudoelementów ::before i ::after, lekkie przesunięcie każdej kopii kolorowym cieniem tekstu (klasycznie czerwonym i cyjanowym, nawiązującym do błędów analogowego sygnału RGB), i animowanie clip-path każdej kopii za pomocą @keyframes, tak aby różne poziome paski każdej kolorowej kopii migotały w czasie.

Technika nie wymaga obrazów, pętli animacji w JavaScript ani canvas — to czysty CSS nałożony na pojedynczy element HTML, który niesie swój tekst dwukrotnie: raz jako prawdziwa zawartość tekstowa, a raz przez atrybut data-text, który pseudoelementy odczytują za pomocą content: attr(data-text).

Źródło: CSS Pseudo-Elements Module Level 4, W3C — definiuje pseudoelementy ::before/::after oraz funkcję attr(), na których zbudowany jest ten efekt.

Dlaczego warto go używać?

• Podgląd animowany na żywo — widzisz prawdziwy efekt glitch podczas pisania i dostosowywania ustawień, a nie tylko statyczny makietę.
• Dwa niezależnie regulowane kolory akcentu, domyślnie klasyczny czerwony/cyjan, ale możliwe do dostosowania do dowolnej marki lub motywu.
• Suwak intensywności steruje przesunięciem kolorowego cienia w pikselach; suwak szybkości steruje tym, jak szybko przebiega cykl klatek kluczowych clip-path.
• Kopiuje zarówno CSS (włącznie z pełnymi blokami @keyframes), jak i dokładną potrzebną strukturę HTML, ponieważ efekt zależy od atrybutu data-text zgodnego z widocznym tekstem.
• Czysty CSS — bez JavaScript w czasie działania, gdy już jest na Twojej stronie, i bez zewnętrznych bibliotek czy obrazów do wczytania.
• Za darmo, bez rejestracji, działa całkowicie w Twojej przeglądarce.

Jak używać

1. Wpisz tekst, który chcesz zglitchować, w pole tekstowe — podgląd aktualizuje się natychmiast.
2. Wybierz dwa kolory akcentu; klasyczna wartość domyślna to czerwony i cyjan dla retro wyglądu rozdzielenia RGB, ale każda kontrastowa para kolorów działa.
3. Dostosuj suwak intensywności, aby określić, jak daleko od siebie znajdują się dwie warstwy kolorów — wyższe wartości sprawiają wrażenie bardziej agresywnego glitcha.
4. Dostosuj suwak szybkości, aby określić, jak szybko migocze glitch.
5. Skopiuj blok CSS i wklej go do swojego arkusza stylów.
6. Skopiuj fragment HTML i użyj go dokładnie tak, jak jest — atrybut data-text musi dokładnie odpowiadać widocznemu tekstowi elementu, aby efekt zadziałał.

Przykład

Wejście

Tekst: „GLITCH” · Kolor 1: #ff0040 (czerwony) · Kolor 2: #00fff9 (cyjan) · Intensywność: 5px

Wynik

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

Bazowy tekst pozostaje biały, podczas gdy jego dwie kopie w pseudoelementach migoczą czerwienią i cyjanem po obu stronach, tworząc klasyczny wygląd uszkodzonego sygnału.

Dlaczego element potrzebuje atrybutu data-text

Pseudoelementy ::before i ::after nie mogą bezpośrednio odczytać zwykłej zawartości tekstowej elementu — content: attr() w CSS działa tylko z prawdziwymi atrybutami HTML, nie z węzłami tekstowymi potomnymi. Dlatego wygenerowany HTML powtarza tekst jako atrybut data-text="..." na tym samym elemencie: widoczny tekst renderuje się normalnie, podczas gdy każdy pseudoelement niezależnie pobiera ten sam ciąg znaków za pomocą content: attr(data-text) i nakłada własną animowaną, przesuniętą kolorystycznie kopię.

Jak powstaje migotanie

Każdy pseudoelement jest animowany własnym blokiem @keyframes, który przechodzi przez serię wartości clip-path: inset(...). Przy każdej klatce kluczowej odsłaniany jest inny poziomy pasek kolorowej kopii, podczas gdy reszta jest przycinana, więc widoczny fragment czerwieni (lub cyjanu) skacze pionowo podczas odtwarzania animacji — w połączeniu z przesunięciem kolorowego cienia czyta się to jako rozdarte, przesunięte kanały kolorów, a nie miękka poświata.

Gdzie ten efekt pasuje

• Główne nagłówki na stronach docelowych gier, cyberpunk, streamingu lub marek muzycznych.
• Strony błędów / 404, gdzie glitch wzmacnia motyw 'coś się zepsuło'.
• Stany hover lub focus na nagłówku lub logo dla krótkiego, przyciągającego uwagę akcentu.
• Stany ładowania lub 'przetwarzania', gdzie glitch przekazuje aktywność systemu.
• Używaj oszczędnie w tekście głównym — efekt jest celowo trudny do odczytania na pierwszy rzut oka, więc działa najlepiej na krótkich nagłówkach lub logotypach, nie na akapitach.

Łączenie z innymi narzędziami CSS

Nagłówek glitch to często tylko jeden element w większym, ciemnym, kontrastowym układzie. Połącz go z miękkim poświatowym cieniem lub zaokrąglonymi rogami z innych narzędzi CSS poniżej, aby uzyskać bardziej dopracowany wygląd.

→ Generator cieni ramki · Generator promienia krawędzi

Najczęściej zadawane pytania