Генератор оформления текста

• Мгновенный живой предпросмотр: смотрите изменения оформления текста в реальном времени, пока настраиваете стиль, цвет, толщину и смещение. Наш генератор обновляет предпросмотр сразу, без нажатия кнопок. Введите свой текст, чтобы увидеть, как оформление смотрится с вашим контентом.
• Полная поддержка CSS-свойств: управляйте каждым свойством CSS text-decoration: линией (подчёркивание, надчёркивание, зачёркивание), стилем (сплошная, двойная, пунктирная, штриховая, волнистая), цветом, толщиной (1-10 px) и смещением подчёркивания (0-20 px). Генератор выдаёт и отдельные свойства, и сокращённую запись.
• 100 % приватно, без загрузки на сервер: вся генерация CSS оформления текста идёт локально в браузере. Ваш текст и дизайнерские решения никогда не покидают устройство и не отправляются на сервер: полностью безопасно для клиентских проектов и закрытого контента.
• Бесплатно и без регистрации: создавайте неограниченный CSS оформления текста без регистрации, подписки и лимитов использования. Наш генератор полностью бесплатен навсегда, без ограничений по числу использований.

Оформление текста в CSS добавляет тексту визуальные линии: подчёркивания снизу, надчёркивания сверху и зачёркивания по центру. Сокращённое свойство text-decoration управляет типом линии, стилем, цветом и толщиной в одном объявлении. Современный CSS также поддерживает text-underline-offset и text-decoration-thickness для точного контроля. Наш генератор позволяет легко изучать эти свойства визуально и получать готовый к продакшену CSS.

1. Выберите пресет или начните настраивать: просмотрите 8 пресетов для популярных стилей оформления текста (классическое подчёркивание, двойное подчёркивание, волнистое, штриховое надчёркивание, пунктирное зачёркивание, толстое смещение, тонкое волнистое). Нажмите на пресет, чтобы применить его сразу.
2. Настройте каждое свойство: выберите линию оформления (подчёркивание, надчёркивание, зачёркивание или нет), один из 5 стилей (сплошная, двойная, пунктирная, штриховая, волнистая), любой цвет через палитру или пресеты, отрегулируйте толщину ползунком (1-10 px) и задайте смещение подчёркивания (0-20 px или auto). Введите свой текст предпросмотра и подберите размер и насыщенность шрифта под ваш дизайн.
3. Скопируйте CSS: нажмите «Скопировать CSS», чтобы скопировать полный блок CSS в буфер обмена. Он содержит и отдельные объявления свойств, и сокращённую запись - готов к вставке в таблицу стилей.

• text-decoration-line: задаёт, какая линия рисуется. Используйте underline для ссылок и акцентов, overline для декоративных заголовков, line-through для зачёркивания (скидки, выполненные задачи) или none, чтобы убрать оформление.
• text-decoration-style: управляет визуальным стилем линии. Выберите solid для стандартных линий, double для двух параллельных, dotted или dashed для тонких эффектов, wavy для игривого оформления или обозначения ошибок.
• text-decoration-color: задаёт цвет независимо от цвета текста. Это позволяет использовать акцентный цвет бренда для подчёркиваний, оставляя основной текст нейтральным - распространённый дизайн-приём, который наш генератор упрощает.
• text-decoration-thickness: управляет шириной линии (1-10 px). Более толстые линии заметнее и могут служить элементом дизайна, а тонкие - ненавязчивы. Используйте ползунок в нашем генераторе, чтобы найти идеальный баланс.
• text-underline-offset: управляет расстоянием между базовой линией текста и подчёркиванием. Большее смещение создаёт больше пространства между текстом и линией, улучшая читаемость толстых подчёркиваний. Установите auto для значения браузера по умолчанию.

Сокращённая запись text-decoration поддерживается всеми браузерами. Отдельные свойства, такие как text-decoration-thickness и text-underline-offset, поддерживаются в Chrome 87+, Firefox 70+, Safari 12.1+ и Edge 87+. Волнистый стиль широко поддерживается во всех современных браузерах. Для максимальной совместимости наш генератор предоставляет и синтаксис отдельных свойств, и эквивалентную сокращённую запись.