Инструменты разработчика

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

Онлайн-генератор CSS text-shadow: настройка смещения по осям X и Y, радиуса размытия и цвета тени для веб-дизайна.

Запустить инструмент

Онлайн-генератор создает готовую строку CSS-свойства text-shadow для оформления текста на веб-страницах. Инструмент формирует валидное правило с указанием горизонтального сдвига, вертикального сдвига, радиуса размытия и цвета тени. Каждое числовое значение автоматически дополняется пиксельными единицами измерения px, а в конце сгенерированной строки ставится точка с запятой.

Если оставить числовые и текстовые поля пустыми, автоматически применяются стандартные параметры: смещение по горизонтали равно 1px, смещение по вертикали составляет 1px, радиус размытия равен 2px, а цвет тени задается значением #00000033. Вы можете свободно менять любые параметры под конкретные задачи веб-дизайна. Для создания четкой резкой тени укажите нулевой радиус размытия. Нулевые сдвиги по осям X и Y создают эффект мягкого контурного свечения вокруг букв. В поле цвета можно вводить шестнадцатеричные коды HEX, значения RGBA с прозрачностью или стандартные ключевые слова CSS. Нажмите кнопку генерации, скопируйте готовую строку кода и сразу вставьте ее в файл стилей вашего сайта.

Инструкция

  1. Задайте числовое смещение тени по горизонтали в поле Offset X или оставьте стандартное значение 1.
  2. Укажите числовой сдвиг по вертикали в поле Offset Y или оставьте стандартное значение 1.
  3. Введите радиус размытия в поле Blur (допустимы любые целые числа или 0 для жесткой тени).
  4. Введите желаемый цвет в поле Color (например, #00000033, rgba(0, 0, 0, 0.5) или red).
  5. Нажмите кнопку запуска и скопируйте полученное CSS-правило из блока вывода.

Примеры

  • Смещение X: 2, смещение Y: 4, размытие: 6, цвет: rgba(0,0,0,0.4) -> text-shadow: 2px 4px 6px rgba(0,0,0,0.4);
  • Смещение X: 0, смещение Y: 0, размытие: 8, цвет: #ffcc00 -> text-shadow: 0px 0px 8px #ffcc00;

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

Что произойдет, если оставить все поля пустыми?

Инструмент подставит стандартные значения: смещение X = 1px, смещение Y = 1px, размытие = 2px и цвет = #00000033.

Можно ли задать нулевое размытие для резкой тени?

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

Какие форматы цвета поддерживает генератор?

Поддерживаются любые корректные форматы CSS: шестнадцатеричные коды HEX, функции rgb/rgba, hsl/hsla, а также именованные цвета вроде red или black.

Встроить этот инструмент

Добавьте рабочий инструмент SmartPlusLab на свой сайт с помощью кода ниже.