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 обычно устраняет это, не меняя визуальный вес.

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

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

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Счетчик FPS

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

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

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

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

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

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Конвертер из формата HEX в ASCII

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

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