Генератор text-shadow

У тени текста всего три числа и цвет: сдвиг по горизонтали, сдвиг по вертикали и размытие. Из нескольких таких слоёв собираются эффекты, которые обычно рисуют в графическом редакторе: обводка по контуру, неоновое свечение, объёмные буквы, вдавленная гравировка. Инструмент показывает результат на живом тексте и сразу отдаёт готовую запись.

Обводка получается из четырёх теней с нулевым размытием, сдвинутых на пиксель в четыре стороны. Свечение — из нескольких слоёв одного цвета с растущим размытием и без сдвига. Объём — из десятка теней, сдвинутых по диагонали с шагом в пиксель: каждая следующая чуть темнее.

Практический смысл у тени один: удержать читаемость. Белый текст поверх фотографии почти всегда теряется на светлых участках, и мягкая тёмная тень возвращает контраст, не затемняя саму картинку.

Для читаемости берите один слой: без сдвига вбок, на пиксель вниз, размытие два-три пикселя, чёрный с непрозрачностью около половины. Этого хватает, чтобы белый заголовок держался на любой фотографии, и тень при этом не бросается в глаза.

Декоративные эффекты держите для крупного текста: обводка и объём на кегле меньше двадцати пикселей превращаются в грязь. И помните про производительность — десяток слоёв тени на длинном тексте заметно нагружает отрисовку при прокрутке. Тень для блоков соберёт генератор box-shadow, а подобрать контрастную пару цветов поможет инструмент сочетаний. Свойство поддерживает список из любого числа теней через запятую, и они рисуются в обратном порядке: первая в записи оказывается сверху. Это важно, когда обводка должна лечь поверх свечения. На тёмной подложке тень делают светлой: белое свечение вокруг тёмных букв возвращает контраст ровно так же, как чёрное вокруг светлых.

Проверяйте результат на настоящей фотографии: однотонная заливка ничего не показывает. Снимок с контрастными участками — светлое небо и тёмные ветки — сразу показывает, хватает ли тени. Если заголовок теряется хотя бы в одном месте, добавьте полупрозрачную подложку под текст.