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

Что это за инструмент?

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

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

Источник: CSS Pseudo-Elements Module Level 4, W3C — определяет псевдоэлементы ::before/::after и функцию attr(), на которых построен этот эффект.

Зачем его использовать?

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

Как использовать

1. Введите текст, который хотите сделать глитчующимся, в текстовое поле — предпросмотр обновится сразу.
2. Выберите два акцентных цвета; классический вариант по умолчанию — красный и голубой для ретро-эффекта RGB-разделения, но подойдёт любая контрастная пара цветов.
3. Настройте ползунок интенсивности, чтобы задать, насколько сильно разнесены два цветовых слоя — более высокие значения выглядят как более агрессивный глитч.
4. Настройте ползунок скорости, чтобы задать, как быстро мерцает глитч.
5. Скопируйте блок CSS и вставьте его в свою таблицу стилей.
6. Скопируйте фрагмент HTML и используйте его как есть — атрибут data-text должен точно совпадать с видимым текстом элемента, чтобы эффект работал.

Пример

Ввод

Текст: «GLITCH» · Цвет 1: #ff0040 (красный) · Цвет 2: #00fff9 (голубой) · Интенсивность: 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 не могут напрямую читать обычное текстовое содержимое элемента — content: attr() в CSS работает только с настоящими HTML-атрибутами, а не с дочерними текстовыми узлами. Поэтому сгенерированный HTML повторяет текст как атрибут data-text="..." на том же элементе: видимый текст рендерится как обычно, а каждый псевдоэлемент независимо получает ту же строку через content: attr(data-text) и накладывает свою собственную анимированную копию со смещённым цветом.

Как создаётся мерцание

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

Где уместен этот эффект

• Главные заголовки на посадочных страницах игровых, киберпанк-, стриминговых или музыкальных брендов.
• Страницы ошибок / 404, где глитч усиливает тему «что-то сломалось».
• Состояния наведения или фокуса на заголовке или логотипе для краткого привлекающего внимание акцента.
• Состояния загрузки или «обработки», где глитч передаёт активность системы.
• Используйте умеренно в основном тексте — эффект намеренно сложно читать с первого взгляда, поэтому он лучше всего работает на коротких заголовках или логотипах, а не на абзацах.

Сочетание с другими CSS-инструментами

Глитч-заголовок часто — лишь один элемент в более крупном тёмном контрастном макете. Сочетайте его с мягкой тенью-свечением или скруглёнными краями карточек из других CSS-инструментов ниже для более завершённого вида.

→ Генератор Box Shadow · Генератор скругления углов

Часто задаваемые вопросы