Softonic

Генератор теней текста CSS

Шаг 1 / 2
Создать CSS

Подбирать объявление text-shadow на глаз в DevTools можно, но это превращается в угадывание, как только нужно получить мягкое неоморфное свечение, ретро-тень в два слоя или чёткий контур в 1 пиксель на крупном заголовке. Этот генератор позволяет задать смещение по X и Y, радиус размытия и цвет в формате RGBA и скопировать готовую к вставке строку CSS.

Как создать тень текста

  1. 1

    Установите смещения

    X, горизонтальное смещение в пикселях, Y, вертикальное. Положительное значение Y перемещает тень вниз, отрицательное, вверх.

  2. 2

    Выберите радиус размытия

    Значение параметра размытия 0 создаёт чёткую силуэтную границу; более высокие значения делают тень более размытой. Типичные варианты мягкой тени используют уровень размытия от 4 до 12 пикселей.

  3. 3

    Выберите цвет

    Используйте строку RGBA для настройки прозрачности. Значение `rgba(0,0,0,0.35)` является безопасным значением по умолчанию для создания слабой глубины на светлых фонах.

  4. 4

    Скопируйте объявление

    Инструмент выводит `text-shadow: Xpx Ypx Blurpx color;`, вставьте эту строку в нужный селектор в вашей таблице стилей.

Рецепты теней текста, которые действительно смотрятся хорошо

Тень текста, это сумма четырёх чисел и цвета. Запомните это, и вы сможете воссоздать почти любой эффект из журнала или лендинга.

Шпаргалка

Эффект Объявление
Лёгкая глубина text-shadow: 0 1px 2px rgba(0,0,0,0.25);
Мягкая тень text-shadow: 0 4px 12px rgba(0,0,0,0.35);
Контур в 1 пиксель text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000;
Ретро в два слоя text-shadow: 2px 2px 0 #f87171, 4px 4px 0 #111827;
Неоновое свечение text-shadow: 0 0 4px #22d3ee, 0 0 12px #22d3ee, 0 0 24px #0ea5e9;

Наложение нескольких теней

text-shadow принимает список, разделённый запятыми. Браузер рисует их по алгоритму художника в порядке следования в коде: последняя тень в списке оказывается позади всех остальных. Используйте это, чтобы имитировать контур (четыре жёсткие тени по 1 пикселю в четырёх направлениях) или создать глубину, наложив одну резкую ближнюю тень и одну размытую дальнюю.

Когда лучше обойтись без text-shadow

  • На очень мелком основном тексте размытие больше 2 пикселей делает символы смазанными. Лучше используйте -webkit-font-smoothing и более сильный контраст.
  • В анимациях крупных заголовков, критичных к производительности, избегайте более трёх наложенных теней: каждый слой заставляет браузер заново растеризовать текст.
  • Если нужна тень с точным смещением на сложном контуре (кривые, повороты), рассмотрите SVG-<filter> с feDropShadow, он точнее повторит очертания символа.

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

По замыслу на выходе получается один слой тени. Чтобы наложить эффекты, запустите генератор несколько раз и соедините результаты запятыми, например, text-shadow: 1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.3);.

text-shadow повторяет очертания символов отображаемого текста, а box-shadow, прямоугольную рамку блока элемента. У них похожие параметры, но растеризуются они по совершенно разным фигурам.

Браузеры растеризуют тени текста по пиксельной сетке устройства. Тень с размытием 0 на дисплее с плотностью 2x попадает на субпиксельные позиции и может выглядеть слегка размытой. Увеличение размытия до 1 обычно устраняет это, не меняя визуальный вес.

Введённые вами значения отправляются на наш сервер для построения декларации, но не сохраняются и не используются повторно. В многошаговом виде они передаются в ссылке между шагами; в одношаговом виде ничего не сохраняется, обновите страницу, и всё исчезнет.

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Инструмент доступен на других языках