Путь задачи / от ввода к результату
Как создать глитч-эффект текста на CSS
- 01
Введите текст для предпросмотра
Введите 1–32 символа в поле «Текст для предпросмотра» — счётчик рядом с подписью отслеживает длину. Короткие широкие слова читаются лучше всего, когда слои начинают расходиться.
- 02
Задайте три цвета
«Цвет текста» рисует базовый слой, а «Циановый канал» и «Красный канал» — смещённые копии, создающие хроматическую кайму. Каналы, близкие к чистым циану и красному, дают классический хроматический вид; приглушённые каналы — более тонкий, современный раскол.
- 03
Настройте движение глитча
«Смещение слоёв» (1–12 px) задаёт, насколько далеко уходят копии, а «Длительность цикла» (0,2–3 с) — скорость цикла. Предпросмотр показывает все три слоя вживую.
- 04
Разберитесь в трёх слоях
Базовый элемент сохраняет ваш «Цвет текста», при этом циановая копия обрезана к верхней части строки, а красная — к нижней. Каждая копия выполняет анимацию steps(2, end) — резкие скачки вместо плавного скольжения, — что и создаёт ощущение помех в сигнале.
- 05
Скопируйте CSS глитча
Нажмите «Копировать CSS» или «Скачать .css», чтобы сохранить toolars-text-glitch.css. Экспорт включает блок prefers-reduced-motion, который оставляет статичную кайму для чувствительных к движению посетителей. Панель вывода показывает живое число байт, и оба действия остаются отключёнными, пока текст не пройдёт проверку.
- 06
Добавьте атрибут data-text
Копии читают своё содержимое из attr(data-text), поэтому вашему элементу нужен атрибут data-text, идентичный его видимому тексту. Когда текст позже изменится, обновите оба — именно атрибут рисуют циановый и красный слои. Атрибут живёт на том же элементе, что и класс, так что весь эффект остаётся одним тегом.