Как настроить text-shadow в CSS: смещение, размытие и цвет

Введите смещения, размытие и цвет, затем получите готовую декларацию text-shadow с единицами px. Пустые поля используют значения по умолчанию, а нулевые смещения и нулевое размытие нужно указывать явно.

Что настраивает генератор тени текста

CSS-свойство text-shadow задаёт тень для текста через четыре части: горизонтальное смещение, вертикальное смещение, радиус размытия и цвет. Генератор помогает получить готовую декларацию, когда нужно быстро подобрать эти значения для заголовка, подписи, кнопки или другого текстового элемента.

Вводите горизонтальное и вертикальное смещение, размытие как числовые значения, а цвет как текст. Числа в итоговой записи получают единицы px, поэтому результат можно сразу перенести в правило CSS. Если поле оставить без значения, применяются параметры по умолчанию: 1 для горизонтального смещения, 1 для вертикального смещения, 2 для размытия и #00000033 для цвета.

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

Как получить декларацию text-shadow

Откройте инструмент и найдите поля для горизонтального смещения, вертикального смещения, размытия и цвета. Если вам нужен быстрый базовый вариант, оставьте поля пустыми. В этом случае будут использованы значения по умолчанию: 1, 1, 2 и #00000033 соответственно.
Введите числовое горизонтальное смещение. Начните с небольшого положительного значения для сдвига вправо или используйте отрицательное значение, если тень должна располагаться левее текста. Затем задайте вертикальное смещение по тому же принципу: положительное значение используют для сдвига вниз, отрицательное - для сдвига вверх.
Укажите размытие числом. Нулевое значение допустимо, если нужен вариант без размытия. Нулевые значения для обоих смещений также принимаются, поэтому можно получить тень без сдвига относительно текста. Для остальных чисел используйте формат, который принимает числовое поле инструмента.
В поле цвета введите нужное текстовое значение, например #663399cc. Инструмент использует цвет как введённый текст: доступность преобразования, проверки диапазона или изменения формата цвета не подтверждена, поэтому заранее выберите запись, которую понимает ваш CSS-контекст.
Запустите вычисление предусмотренной кнопкой управления и скопируйте сформированную декларацию. Для сочетания горизонтального смещения 4, вертикального смещения -2, размытия 6 и цвета #663399cc результат имеет форму text-shadow: 4px -2px 6px #663399cc;. Обратите внимание на единицы px после каждого числового параметра и на точку с запятой в конце.
Вставьте декларацию в правило того элемента, чей текст должен получить тень, и проверьте отображение на своей странице. Если эффект кажется слишком сильным, изменяйте по одному параметру: сначала размытие, затем смещения или цвет. Такой подход помогает понять, какая настройка повлияла на вид результата.

Как читать результат и проверять его

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

Пустые числовые поля не означают нулевые значения. Они запускают значения по умолчанию: 1px по горизонтали, 1px по вертикали и 2px для размытия. Если же требуется отсутствие смещения или размытия, введите 0 явно. Для цвета действует отдельное значение по умолчанию #00000033, когда поле цвета оставлено пустым.

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

Рабочий пример. Для карточки с фиолетовым текстом вы вводите 4, -2, 6 и #663399cc. Проверяемая форма результата: декларация начинается с text-shadow:, содержит 4px -2px 6px #663399cc в указанном порядке и заканчивается ;.

Практический пример

Вы настраиваете тень для фиолетового текста карточки и хотите получить заметное смещение вправо и вверх с умеренным размытием.

Для текста в карточке введите горизонтальное смещение 4, вертикальное смещение -2, размытие 6 и цвет #663399cc, затем запустите вычисление.

Декларация начинается с text-shadow:, содержит 4px -2px 6px #663399cc в заданном порядке и завершается точкой с запятой.

Ограничения

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

Частые ошибки

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

Частые вопросы

Что произойдёт, если не заполнять поля?

Если оставить поля пустыми, инструмент подставит горизонтальное смещение 1, вертикальное смещение 1, размытие 2 и цвет #00000033. Чтобы получить нулевое значение, введите 0 явно.

Можно ли сделать тень без смещения и размытия?

Да, нулевые значения для обоих смещений и размытия принимаются в успешном вычислении. Введите 0 в соответствующее поле, а не оставляйте его пустым.

Какие значения можно вводить?

Числовые поля принимают горизонтальное смещение, вертикальное смещение и размытие, а поле цвета принимает текст. Итоговая запись добавляет px к трём числовым значениям и завершает декларацию точкой с запятой.