Генератор эффекта Glitch для текста CSS
Создавайте анимированный эффект glitch для текста CSS — хроматическое разделение RGB, обрезанные полосы, дрожание или мерцание — с вашим собственным текстом, цветами, размером, интенсивностью и скоростью. Копируйте готовые CSS + HTML.
Ввод
Появляется как в текстовом содержимом элемента, так и в его атрибуте data-text, который читают слои эффекта.
Эффект обрезанных полос рисует свои слои сплошным цветом, поэтому он должен соответствовать реальному фону.
Насколько далеко смещаются слои glitch, в пикселях. Масштабируйте с размером шрифта.
Продолжительность одного полного цикла анимации (0,2-5 сек). Короче — френетичнее.
Вывод
Ваш текст glitch появится здесь.
Реальный созданный эффект, изолированный в Shadow DOM так, чтобы @keyframes действительно анимировалась.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-glitch-text-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "GLITCH",
"effect": "chromatic",
"fontSize": "80",
"fontFamily": "mono",
"textColor": "#ffffff",
"bgColor": "#222222",
"glitchColor1": "#00ffff",
"glitchColor2": "#ff00ff",
"intensity": "4",
"duration": "1.5"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-glitch-text-generator` tool (CSS Glitch Text Effect Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-glitch-text-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор эффекта Glitch для текста CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Генератор эффекта Glitch для текста CSS создаёт анимированный текст "glitch" — хроматическое разделение RGB, разорванные полосы, внешний вид ошибки VHS — как самостоятельный фрагмент CSS + HTML. Введите ваш текст, выберите один из четырёх эффектов, установите цвета, размер, интенсивность и скорость цикла, затем скопируйте два блока в ваш проект.
Нет изображения, нет файла шрифта, нет JavaScript и нет библиотеки анимации: весь эффект — это text-shadow, clip-path, transform и CSS цикл @keyframes.
Четыре эффекта
- Хроматическое разделение — два цвета glitch скользят по обе стороны глифов в каждом кадре, создавая классический вид неправильно выровненной печати / анаглифа. Тонкий при низкой интенсивности, агрессивный при высокой.
- Обрезанные полосы — настоящий glitch: две дополнительные копии текста (нарисованные
::beforeи::afterиз атрибутаdata-text) разрезаны на горизонтальные полосы с помощьюclip-path: inset()и смещены, так что части слова как бы отрываются и возвращаются обратно. - Дрожание и перекос — весь блок трясётся и наклоняется резкими скачками, с цветным разделением, вспыхивающим внутри и наружу. Хорошо подходит для 404 или состояния ошибки.
- Мерцание — мигание отказывающейся неоновой вывески: текст тускнеет и вспыхивает снова по нерегулярному расписанию с цветным кровотечением по краям.
Как работает интенсивность
Интенсивность — это смещение, в пикселях, на которое перемещается каждый слой эффекта. Она масштабирует смещения text-shadow, смещения left слоев обрезанных полос и расстояние translate дрожания. Как практическое правило, держите интенсивность около 5% размера вашего шрифта — около 4px при размере 80px — затем повышайте для героя и понижайте для чего-либо, что вы действительно ожидаете, что люди будут читать.
Доступность движения
Быстрое движение с высоким контрастом — известный триггер мигреней и вестибулярных симптомов, а цикл glitch — это примерно так же быстро и контрастно, как веб-типография. Поэтому каждый фрагмент, который генерирует этот инструмент, заканчивается блоком @media (prefers-reduced-motion: reduce), который устанавливает animation: none, поэтому текст возвращается в чистое статическое состояние для любого, чья система запрашивает сокращённое движение. Сохраняйте этот блок при вставке CSS.
Как использовать
- Введите ваш Текст. Он записывается как в текстовое содержимое элемента, так и в его атрибут
data-text, который читают слои обрезанных полос. - Выберите Эффект Glitch, затем установите Размер шрифта и Шрифт.
- Выберите цвета: Текст, Фон и два цвета Glitch (голубой/пурпурный — традиционная пара).
- Отрегулируйте Интенсивность и Длительность цикла — более короткий цикл кажется более френетичным.
- Скопируйте CSS в вашу таблицу стилей и HTML в вашу разметку.
FAQ
Почему фрагмент устанавливает цвет фона? Эффект обрезанных полос рисует свои два дублирующихся слоя сплошным цветом, поэтому срезы скрывают оригинальный текст под ними. Если этот цвет не соответствует тому, что действительно находится позади элемента, будут видны швы. Установите Цвет фона на реальный фон вашей страницы — или сохраните собственный фон элемента, который созданный CSS применяет для вас.
Могу ли я использовать его для существующего элемента вместо созданного <div>?
Да. Добавьте class="io-glitch" и атрибут data-text с тем же текстом. Значение data-text — это то, что дублируют слои эффекта, поэтому оно должно соответствовать видимому тексту или разрыв покажет неправильные символы.
Работает ли это для многострочного текста? Эффект предназначен для одной линии — заголовка, логотипа, 404. Обрезанные слои позиционируются относительно блока элемента, поэтому длинные завёрнутые абзацы будут выглядеть неправильно выровненными.
Что-нибудь загружается? Нет. Фрагмент генерируется в вашем браузере из значений, которые вы вводите; ничего не отправляется на сервер и не сохраняется.
Связанные инструменты
Для другого чистого CSS эффекта типа попробуйте Генератор CSS градиентного текста. Если вам нужны глиф-символы вместо стиля glitch — текст, который остаётся сломанным при вставке в чат или биографию — Генератор текста Zalgo делает это с использованием символов объединения Unicode вместо CSS. Чтобы написать свою собственную кривую анимации, используйте Генератор анимации Keyframe CSS и сожмите готовую таблицу стилей с помощью CSS Minifier & Beautifier.