Генератор рельефного текста CSS

Эффекты выпуклого и гравированного текста придают заголовкам и кнопкам тонкий, тактильный вид с помощью всего одного хорошо настроенного text-shadow. Этот инструмент позволяет ввести текст, выбрать «Выпуклый» (приподнятый) или «Гравированный» (вырезанный), настроить интенсивность и мгновенно получить код CSS с живым превью.

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

Этот инструмент сочетает светлый и тёмный text-shadow, смещённые в противоположных направлениях, создавая иллюзию приподнятого (выпуклого) или вырезанного (гравированного) текста.

Переключайтесь между стилями «Выпуклый» и «Гравированный», а с помощью ползунка интенсивности управляйте силой 3D-эффекта.

Живое превью мгновенно обновляется по мере ввода текста или изменения любой настройки, что позволяет точно настроить эффект перед копированием CSS.

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

Нужно, чтобы логотип компании в подвале корпоративного сайта выглядел выгравированным на серебряной табличке, но без экспорта картинки — чтобы страница оставалась лёгкой.
Собираете портфолио с намеренно ретро-интерфейсом в духе Windows 95, и подписям на кнопках и панелях нужен тот самый характерный объём.
Работаете над интернет-магазином и хотите, чтобы бейджи «премиум-товар» выглядели вырезанными в коже или металле, но одним box-shadow нужного эффекта добиться не удалось.
В макете дизайна показан «рельефный текст», и его нужно воссоздать чистым CSS без экспорта картинки, а как правильно скомбинировать значения text-shadow — не очень понятно.
Двигаете ползунок интенсивности, сравнивая живое превью, чтобы найти баланс между едва заметным рельефом и выраженной гравировкой под настроение сайта.
Дизайн клиентского проекта ещё нельзя показывать публично, и приятно, что вся генерация происходит в браузере — скопированный CSS никуда не отправляется.

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

Введите текст, который хотите оформить.
Выберите «Выпуклый» (приподнятый) или «Гравированный» (вырезанный) в селекторе стиля.
Настройте ползунок интенсивности и выберите цвет фона и текста, подходящие вашему дизайну.
Нажмите «Копировать», чтобы скопировать сгенерированный код CSS, и вставьте его в свою таблицу стилей.

Пример

Ввод

Текст: «Embossed», Стиль: Выпуклый, Интенсивность: 2

Результат

color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);

Сгенерированный CSS задаёт цвет текста, цвет фона и двухслойный text-shadow, создающий эффект выпуклости или гравировки.

Как работает эффект

Эффекты выпуклости и гравировки строятся из двух смещённых слоёв text-shadow с противоположными светлыми и тёмными цветами.

Свойство	Назначение
Светлая тень (rgba(255,255,255,0.7))	Имитирует источник света, падающий на один край текста
Тёмная тень (rgba(0,0,0,0.5))	Имитирует тень, падающую на противоположный край
Направление смещения	Меняется на противоположное между «Выпуклым» и «Гравированным» для переворота 3D-иллюзии
Интенсивность	Определяет, насколько далеко светлая и тёмная тени смещены от текста
Совпадающие цвета	Цвет текста и фона задаются близкими, чтобы скрыть плоский контраст

Где этот эффект применяют на практике

Компаниям с долгой историей и традиционным позиционированием часто хочется, чтобы логотип выглядел как гравировка на металлической табличке — это придаёт сайту ощущение солидности. Раньше для этого приходилось экспортировать картинку в графическом редакторе и готовить отдельные версии под разные разрешения экрана. При реализации только через text-shadow логотип остаётся настоящим текстом — это лучше для SEO и доступности — и не теряет чёткости ни на одном экране.

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

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

В чём разница между «Выпуклым» и «Гравированным»?

«Выпуклый» делает текст приподнятым над фоном: светлая тень сверху слева, тёмная тень снизу справа. «Гравированный» переворачивает это, заставляя текст выглядеть вырезанным в фоне.

Почему эффект лучше всего смотрится при похожих цветах текста и фона?

Иллюзия рельефа/гравировки полностью зависит от бликов и теней, а не от контраста текста с фоном — поэтому задание цвета текста близкого (или совпадающего) с цветом фона обычно даёт наиболее чистый результат.

Можно ли использовать этот эффект на любом элементе, а не только на тексте?

Свойство text-shadow, которое генерирует этот инструмент, применяется только к тексту. Для аналогичного эффекта на фигурах или кнопках потребуется похожая настройка box-shadow.

Сохраняет или отслеживает ли этот инструмент то, что я ввожу?

Нет. CSS генерируется полностью в вашем браузере — ничего не отправляется и не сохраняется на сервере.

Будет ли это работать во всех браузерах?

Да — text-shadow отлично поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari и Edge.

Хорошо ли эффект смотрится на градиентном фоне или фоновом изображении, а не только на сплошном цвете?

Поскольку эффект зависит от близости цвета текста и фона, на градиенте или изображении стоит выбрать в качестве цвета текста один из преобладающих оттенков этой области, чтобы уменьшить визуальный диссонанс. На фоне с сильным контрастом света и тени направление имитируемого источника света может выглядеть неестественно.

Можно ли применить этот эффект к кнопкам, а не только к заголовкам?

Да, text-shadow применяется к любому элементу, содержащему текст, поэтому эффект хорошо работает и на подписи кнопки. Если нужно придать объём и самой кнопке, а не только тексту внутри неё, стоит дополнительно настроить отдельный box-shadow.

Что произойдёт, если выставить слишком высокую интенсивность?

При чрезмерно высокой интенсивности светлая и тёмная тени слишком сильно отдаляются от текста, и эффект перестаёт читаться как объёмный рельеф, превращаясь в обычную двойную тень. В большинстве случаев более скромные значения интенсивности дают более естественный результат.

Хорошо ли эффект работает с кириллическими буквами и знаками ударения?

Да, text-shadow применяется к любым символам, которые рендерит шрифт, включая кириллицу. При очень высокой интенсивности на шрифтах с тонкими штрихами тени могут визуально «слипаться» с буквами — шрифты с более толстыми штрихами делают эффект более разборчивым.