Генератор CSS Гліч-Тексту

Цей інструмент створює анімований ефект гліч-тексту з RGB-розщепленням на чистому CSS, використовуючи два дубльовані псевдоелементи, що тремтять і зміщують колір позаду вашого тексту. Введіть свій текст, виберіть два акцентні кольори, налаштуйте інтенсивність і швидкість гліча, подивіться на живу анімацію, а потім скопіюйте як згенерований CSS, так і невелику HTML-структуру, яка йому потрібна.

Що це за інструмент?

CSS ефект гліча імітує вигляд пошкодженого трансляційного сигналу або подертої VHS-касети, дублюючи фрагмент тексту двічі за допомогою псевдоелементів ::before і ::after, трохи зміщуючи кожну копію кольоровою text-shadow (класично червоний і бірюзовий, що відлунює помилки аналогового RGB-сигналу), і анімуючи clip-path кожної копії за допомогою @keyframes так, що різні горизонтальні зрізи кожної кольорової копії спалахують і зникають із часом.

Ця техніка не потребує зображень, циклу анімації на JavaScript чи canvas — це чистий CSS, накладений на один HTML-елемент, що несе свій текст двічі: один раз як реальний текстовий вміст і один раз через атрибут data-text, який псевдоелементи зчитують за допомогою content: attr(data-text).

Джерело: CSS Pseudo-Elements Module Level 4, W3C — визначає псевдоелементи ::before/::after та функцію attr(), на яких побудований цей ефект.

Навіщо його використовувати?

Живий анімований попередній перегляд — бачите реальний ефект гліча під час введення тексту й налаштування параметрів, а не просто статичний макет.
Два незалежно налаштовувані акцентні кольори, за замовчуванням класичний вигляд RGB-розщеплення червоний/бірюзовий, але їх можна кастомізувати під будь-який бренд чи тему.
Повзунок інтенсивності контролює зміщення кольорової тіні в пікселях; повзунок швидкості контролює, як швидко циклюють кадри clip-path.
Копіює як CSS (включно з повними блоками @keyframes), так і точну потрібну HTML-структуру, оскільки ефект залежить від атрибута data-text, що відповідає видимому тексту.
Чистий CSS — жодного JavaScript не потрібно під час виконання, коли він уже на вашій сторінці, і жодних зовнішніх бібліотек чи зображень для завантаження.
Безкоштовно, без реєстрації, працює повністю у вашому браузері.

Як користуватися

Введіть текст, який хочете зробити гліч-ефектом, у текстове поле — це негайно оновлює живий попередній перегляд.
Виберіть два акцентні кольори; класичний варіант за замовчуванням — червоний і бірюзовий для ретро вигляду RGB-розщеплення, але підійде будь-яка пара контрастних кольорів.
Налаштуйте повзунок інтенсивності, щоб контролювати, наскільки далеко один від одного розташовані два кольорові шари — вищі значення сприймаються як агресивніший гліч.
Налаштуйте повзунок швидкості, щоб контролювати, наскільки швидко мерехтить гліч.
Скопіюйте блок CSS і вставте його у свою таблицю стилів.
Скопіюйте фрагмент HTML і використовуйте його точно так, як показано — атрибут data-text має відповідати видимому тексту елемента, щоб ефект працював.

Приклад

Введення

Text: "GLITCH" · Color 1: #ff0040 (red) · Color 2: #00fff9 (cyan) · Intensity: 5px

Результат

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

Базовий текст залишається білим, тоді як дві його копії-псевдоелементи мерехтять червоним і бірюзовим по обидва боки, створюючи класичний вигляд пошкодженого сигналу.

Чому елементу потрібен атрибут data-text

Псевдоелементи ::before і ::after не можуть напряму зчитати звичайний текстовий вміст елемента — CSS content: attr() працює лише з реальними HTML-атрибутами, а не з дочірніми текстовими вузлами. Саме тому згенерований HTML повторює текст як атрибут data-text="..." на тому самому елементі: видимий текст рендериться нормально, тоді як кожен псевдоелемент незалежно бере той самий рядок через content: attr(data-text) і накладає власну кольорозміщену анімовану копію зверху.

Як створюється мерехтіння

Кожен псевдоелемент анімується власним блоком @keyframes, що проходить через серію значень clip-path: inset(...). На кожному кадрі відкривається інша горизонтальна смуга кольорової копії, тоді як решта обрізається, тому видимий фрагмент червоного (чи бірюзового) кольору стрибає вертикально під час відтворення анімації — у поєднанні зі зміщенням кольорової тіні це сприймається як подерті, розсинхронізовані кольорові канали, а не плавне світіння.

Де застосовується цей ефект

Головні заголовки на посадкових сторінках для геймінгу, кіберпанку, стрімінгу чи музичних брендів.
Сторінки 404/помилок, де гліч підкреслює тему 'щось зламалося'.
Стани при наведенні чи фокусі на заголовку чи логотипі для короткого акценту, що привертає увагу.
Стани завантаження чи 'обробки', де гліч передає активність системи.
Використовуйте помірковано для основного тексту — ефект навмисно важко читати з першого погляду, тому він найкраще працює на коротких заголовках чи логотипах, а не на абзацах.

Поєднання з іншими CSS-інструментами

Заголовок із гліч-ефектом часто є лише одним елементом більшого темного, висококонтрастного макета. Поєднайте його з м'якою тінню світіння чи заокругленими краями картки з інших CSS-інструментів нижче для більш завершеного вигляду.

→ Генератор box-shadow · Генератор border-radius

Часті запитання

Чому червоний і бірюзовий є кольорами за замовчуванням?

Червоний і бірюзовий імітують класичне розсинхронізування RGB-каналів, яке спостерігається у пошкодженому аналоговому відео та ранніх помилках цифрового сигналу — саме звідти й походить візуальна мова ефекту 'гліч'. Ви можете замінити на будь-яку пару кольорів, але сильно контрастні відтінки найчіткіше читаються як розщеплення кольору.

Чи потребує цей ефект JavaScript?

Ні — коли CSS уже на вашій сторінці, гліч є чистою CSS-анімацією на основі @keyframes. JavaScript використовується лише самим цим інструментом, у вашому браузері, для оновлення живого попереднього перегляду й генерації коду для копіювання.

Чому ефект не з'являється, коли я вставляю CSS у свій проєкт?

Найпоширеніша причина — невідповідний або відсутній атрибут data-text. Псевдоелементи рендерять той рядок, що знаходиться в data-text="..." на елементі, а не власний текстовий вміст елемента, тому обидва мають бути встановлені й точно збігатися, включно з регістром.

Чи можу я застосувати це до заголовка на кшталт h1 замість div?

Так — техніка працює на будь-якому вбудованому чи блоковому елементі, що приймає псевдоелементи ::before/::after та атрибут data-text. Просто застосуйте той самий клас і атрибут data-text до свого h1, span чи іншого елемента замість div.

Чи зашкодить сильний ефект гліча доступності або SEO?

Базовий текстовий вміст є реальним, виділюваним текстом, тому скрінрідери й пошукові системи читають його нормально незалежно від візуальної анімації. Для користувачів, чутливих до мерехтіння, розгляньте врахування prefers-reduced-motion, вимкнувши чи сповільнивши анімацію для таких користувачів.