Генератор text-shadow: многослойные тени с предпросмотром

Как пользоваться

Введите текст в поле Пример текста. Предпросмотр покажет его с тенью, так что результат можно оценить на своих словах.
Задайте Горизонтальное смещение (px), Вертикальное смещение (px) и Размытие (px) первого слоя. Положительное вертикальное смещение опускает тень вниз.
Выберите Цвет тени и Непрозрачность каждого слоя и добавляйте новые кнопкой Добавить слой для более мягкого свечения.
Скопируйте объявление CSS и вставьте его в правило для своего текста.

Как строится значение

Свойство text-shadow принимает одну тень или список теней через запятую. У каждой тени есть горизонтальное и вертикальное смещение и радиус размытия, который можно опустить, а также цвет, который может стоять до или после длин. Грамматику задаёт спецификация CSS Text Decoration. Первая тень рисуется поверх остальных, а без тени значение равно none.

Тень текста не имеет растяжения (spread), в отличие от тени блока. Радиус размытия никогда не бывает отрицательным, и чем больше размытие, тем шире растекается тень. Прозрачность записывается как альфа-значение цвета rgba, не более чем с двумя знаками после точки. Нулевая длина не требует единицы, поэтому инструмент пишет 0.

text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...

Слои и что проверяет редактор

Мягкое свечение часто использует два или три слоя: небольшую тёмную тень близко к буквам и большую, более светлую, дальше от них. Редактор допускает до 8 слоёв, смещения от -200 до 200 пикселей, размытие от 0 до 100 пикселей и непрозрачность от 0 до 100 процентов.

Цвета предпросмотра, цвет текста и фон нужны только для предпросмотра. Они не входят в CSS, поэтому объявление задаёт только тень и ничего больше.

Пример: чёрная тень под синим свечением

У первого слоя смещение 0 и 2 пикселя, размытие 4 пикселя и чёрный цвет с непрозрачностью 30 процентов. У второго нет смещения, размытие 12 пикселей, а цвет синий, #3b82f6, с непрозрачностью 50 процентов.

Значение: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), а объявление: text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);

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

В чём разница между размытием и вторым слоем?

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

Зачем смещениям знак?

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

Может ли у тени текста быть растяжение?

Нет. Свойство text-shadow принимает только смещение, размытие и цвет. У тени блока есть растяжение, а у текста его нет, поэтому редактор его не предлагает.

Почему предпросмотр выглядит не так, как моя страница?

В предпросмотре используются пример текста, размер и цвета, которые вы задали здесь. На вашей странице тень ляжет на ваш шрифт, размер и фон, поэтому проверьте результат на месте, прежде чем закончить.

Сохраняется ли что-нибудь из введённого или отправляется на сервер?

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

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..