Генератор CSS-тени текста

Создайте стопку теней текста

1. Отредактируйте пример текста, горизонтальное и вертикальное смещения, радиус размытия, цвет и непрозрачность каждого включённого слоя. Поля принимают сотые, ползунки позволяют быстро задавать целые значения.
2. Добавляйте, дублируйте, отключайте, удаляйте и перемещайте слои. Первый включённый слой расположен перед остальными тенями. Отключённые слои сохраняют значения, но исключаются из CSS.
3. Проверьте CSS и нативный предпросмотр и выберите «Копировать CSS». Копируется только декларация тени; текст, шрифт и фон служат контекстом предпросмотра.

Как устроены заданные слои

Каждый слой задаёт горизонтальное и вертикальное смещения и неотрицательное размытие в CSS-пикселях, затем явный цвет RGBA. Отрицательные значения смещают влево или вверх; нулевое размытие даёт чёткую смещённую тень. Свойство следует форме глифов, а не прямоугольному блоку.

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

Непрозрачность тени становится альфа-каналом цвета слоя. Например, 37,5% точно превращается в 0.375 без восьмибитного квантования альфа. Непрозрачность текста — отдельная настройка цвета предпросмотра, поэтому у прозрачного текста могут оставаться видимые тени.

Включённый прозрачный слой остаётся в декларации. Отключение всех слоёв или очистка списка выдаёт text-shadow: none; и явно сбрасывает унаследованные тени. Пустая недопустимая декларация этому не равна.

Примеры порядка, цвета и прозрачности

Первый слой примера использует -3.25px по горизонтали, 6.5px по вертикали, размытие 0px и #336699 при 37%. Его каналы — 51, 102 и 153, альфа — 0.37. Второй оранжевый слой использует 0px, -2px, размытие 12px и 80%.

Перемещение оранжевого слоя на первое место меняет порядок через запятую, не меняя значений. Предпросмотр показывает перекрытие; инструмент не объединяет дубликаты, не сортирует цвета и не удаляет невидимые слои.

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

Ограничения редактирования и предпросмотра

Редактор поддерживает до двенадцати слоёв, смещения от -64 до 64 CSS-пикселей, размытие от 0 до 64, шестизначные hex-цвета и непрозрачность от 0 до 100% с точностью до сотых. Он намеренно использует устоявшееся подмножество без расширения, inset, currentColor, произвольных единиц и импорта CSS; новые спецификации обсуждают дополнительный синтаксис.

Пример использует обычный текст и локальный системный шрифт. Запасные шрифты, глифы, размер и переносы влияют на вид. Копируется только text-shadow, поэтому на другой странице результат может отличаться. Это не сертификация контраста, читаемости или совпадения пикселей.

Тени не увеличивают раскладку текста или область прокрутки. Область предпросмотра с отступом приблизительна, а края могут обрезать размытие или смещение. Прокрутка не гарантирует доступ ко всем пикселям тени.

Недопустимые значения включённого слоя убирают текущий CSS и оформленный пример до исправления. Значения отключённых слоёв игнорируются до включения. Ошибки настроек предпросмотра скрывают только пример; пустой текст допускается.

Локальное оформление без загрузки текста

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