В этой статье
Что делает CSS Text Shadow
Свойство CSS text-shadow добавляет эффекты тени к текстовым символам. Каждая тень определяется горизонтальным смещением, вертикальным смещением, радиусом размытия и цветом. В отличие от box-shadow, text-shadow следует точной форме каждого глифа символа, создавая эффекты, которые обтекают буквенные формы.
Можно накладывать несколько теней на один элемент, разделяя их запятыми. Это позволяет создавать сложные эффекты — неоновое свечение, тиснёные буквы, 3D-экструзии и огненный текст — всё на чистом CSS, без изображений или canvas.
Использование генератора тени текста
Генератор предоставляет интуитивные элементы управления для создания теней текста без запоминания синтаксиса CSS. Вы можете настраивать каждый параметр в реальном времени и видеть результат мгновенно.
- Элементы управления смещением — перетаскивайте ползунки или вводите точные значения в пикселях для горизонтального (X) и вертикального (Y) смещения
- Радиус размытия — увеличивайте размытие для мягких, светящихся эффектов или держите его на нуле для чётких теней
- Множество слоёв — добавляйте несколько слоёв тени и меняйте их порядок для создания сложных композитных эффектов
Попробуйте бесплатно — без регистрации
Сгенерировать CSS Text Shadow →Креативные текстовые эффекты с text shadow
Тени текста — это не только тонкие эффекты глубины. Комбинируя несколько слоёв тени с разными смещениями, значениями размытия и цветами, можно создавать впечатляющие визуальные эффекты полностью на CSS.
- Неоновое свечение — используйте нулевое смещение с большим радиусом размытия и ярким цветом (голубой, пурпурный, салатовый), повторённым в нескольких слоях с нарастающим размытием
- Тиснение и letterpress — сочетайте светлую тень, слегка смещённую вниз-вправо, с тёмной тенью, слегка смещённой вверх-влево, на среднесером фоне для эффекта вдавливания в металл
- 3D-экструзия — сложите много теней с нарастающими смещениями (1px 1px, 2px 2px, 3px 3px...) в постепенно темнеющих цветах для объёмного текстового эффекта
Часто задаваемые вопросы
Влияет ли text-shadow на производительность?
Одиночные тени имеют незначительное влияние на производительность. Однако наложение множества теней с большими радиусами размытия может вызвать замедление рендеринга, особенно на мобильных устройствах. Тестируйте сложные эффекты на целевых устройствах.
Какие браузеры поддерживают text-shadow?
Text-shadow имеет отличную поддержку во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и мобильные браузеры. Поддерживается с IE10 и может безопасно использоваться без фолбэков.
Можно ли анимировать text-shadow с помощью CSS-переходов?
Да. Text-shadow полностью анимируется с помощью CSS-переходов и keyframe-анимаций. Можно плавно переходить между различными состояниями тени для эффектов наведения и анимаций.