Генератор тени текста CSS (text-shadow)

• Выберите основу в галерее: мягкую тень, свечение, неон, обводку, комикс, объём, длинную тень, огонь и другие эффекты. Выбранный пример выделяется рамкой.
• В блоке «Предпросмотр» впишите свой текст и подберите шрифт, насыщенность, размер, цвет текста и фон. Эти параметры в CSS не попадают — они нужны, чтобы увидеть тень в условиях своего макета.
• Режим «Отдельные слои»: каждый слой — вкладка со смещением, размытием, цветом и непрозрачностью. Слоёв до 8, порядок меняется перетаскиванием вкладки или Alt + ← / →.
• Режим «Объём и длинная тень»: задайте направление, глубину и цвет — генератор сам построит слои по 1px. «Затухание» делает длинную тень прозрачнее к концу, «Мягкая тень под объёмом» добавляет размытую тень снизу.
• Скопируйте CSS или ссылку на эффект: по ссылке откроются те же настройки. Кнопка развёртывания открывает инструмент на всё окно, выход — «Свернуть» или Esc.

Запись text-shadow: 2px 2px 4px rgb(0 0 0 / 0.3) читается по порядку: смещение по горизонтали, смещение по вертикали, размытие и цвет. В отличие от box-shadow, у тени текста нет растяжения и inset: она повторяет форму букв.

• Несколько теней перечисляются через запятую, первая рисуется поверх остальных.
• Тени без смещения и с размытием дают свечение и неон.
• Четыре тени без размытия, сдвинутые по диагоналям, рисуют обводку букв.
• Много теней без размытия со сдвигом на 1px создают объём и длинную тень.

Тень не увеличивает размер элемента и не сдвигает соседей. Для мелкого текста на пёстром фоне помогает тёмная тень с небольшим размытием — она улучшает читаемость.