Генератор CSS-тени текста
Визуально создавайте многослойные CSS text-shadow эффекты. Регулируйте смещение, размытие, цвет и прозрачность. Мгновенно копируйте CSS.
Текст предварительного просмотра
Размер шрифта — 48px
Цвет текста
Цвет фона
Слои тени (1)
Смещение X
Смещение Y
Размытие
Цвет
Непрозрачность — 30%
Сгенерированный CSS
text-shadow: 2px 2px 6px rgba(0,0,0,0.30);
Об этом инструменте
Генератор CSS-тени текста позволяет визуально создавать многослойные тени текста и мгновенно получать CSS-вывод. Каждый слой имеет независимые элементы управления смещением X/Y, радиусом размытия, цветом и непрозрачностью.
Непрозрачность применяется как альфа-канал RGBA, обеспечивая плавную прозрачность без браузерных хаков. Сгенерированный CSS работает во всех современных браузерах.
Как использовать
- Выберите пресет для начала или настройте слои вручную.
- Введите текст предварительного просмотра и настройте размер шрифта и цвета.
- Добавьте больше слоёв с + Добавить слой для сложных эффектов.
- Нажмите Копировать CSS, чтобы скопировать декларацию text-shadow в таблицу стилей.
Случаи использования
Фронтенд-разработчики создают заголовки секций hero с глубиной и объёмом. Дизайнеры прототипируют текстовые эффекты в CSS. Маркетинговые команды создают привлекательный текст CTA с эффектами свечения и неона.
Частые вопросы
- Сколько слоёв можно добавить? — Ограничений нет. CSS поддерживает любое количество значений text-shadow, разделённых запятыми. На практике 1-4 слоя покрывают большинство эффектов.
- Работает ли text-shadow во всех браузерах? — Да. text-shadow полностью поддерживается всеми современными браузерами с 2012 года.
- Что такое радиус размытия 0? — Чёткая тень без размытия, полезна для ретро- или контурных эффектов.