Генератор CSS text-shadow
НовоеНастройте тень текста CSS с живым предпросмотром и скопируйте код.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
Создавайте CSS-тени текста с живым предпросмотром
Этот генератор CSS-теней для текста позволяет визуально проектировать эффекты глубины, свечения и контура, а затем скопировать чистый CSS, готовый для использования в проекте. Кликните прямо в большую область предпросмотра, введите свой текст, перетащите ползунки смещения, размытия и прозрачности, выберите цвет — и text-shadow обновится в реальном времени.
Измените семейство шрифтов, размер и насыщенность, задайте цвет текста и переключайте фон между светлым, серым, тёмным и шахматным узором, чтобы точно видеть, как тень смотрится на разных поверхностях. Это особенно важно для неонового текста и светящегося текста — они выглядят правильно только на тёмном фоне.
Синтаксис text-shadow: полный разбор
Одна CSS-тень записывается как text-shadow: offset-x offset-y blur-radius color. Значения offset-x и offset-y сдвигают тень горизонтально и вертикально (отрицательные значения кидают её вверх или влево), blur-radius смягчает край (0 — чёткий), а цвет определяет тон — обычно полупрозрачный чёрный для тонкой глубины или яркий оттенок для свечения.
Классическая читаемая тень — text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Установите оба смещения в 0 и увеличьте размытие — получите мягкий ореол вокруг текста. Яркий цвет (например, #00eaff) с несколькими нарастающими значениями размытия даёт неоновое свечение.
Наслаивайте несколько теней: неон, 3D, контур и длинная тень
Настоящая сила text-shadow — в наслоении. Вы можете перечислить несколько теней текста через запятую в одном объявлении, и браузер нарисует каждую по очереди. Несколько теней одного яркого цвета с нарастающим размытием дают неоновое/светящееся свечение; ступенчатое смещение вниз-вправо с постепенно темнеющим цветом строит 3D-выдавленный текст; повторение одного плоского смещения в десяти и более слоях — длинную тень; четыре-восемь жёстких смещений вокруг глифов — контурный текст.
Используйте галерею пресетов — Мягкий, Неон, Свечение, 3D, Длинная тень, Контур, Ретро, Огонь и Letterpress — как отправную точку.
Копируйте CSS, Tailwind или React Native
Экспортируйте результат в нужном формате. Копировать CSS даёт стандартное объявление text-shadow; Копировать Tailwind генерирует класс произвольного свойства вроде [text-shadow:2px_2px_4px_#00000066], совместимый с нативными утилитами text-shadow-* Tailwind v4; Копировать React Native преобразует первый слой в textShadowColor, textShadowOffset и textShadowRadius.
Хорошая новость о совместимости с браузерами: text-shadow полностью стандартизирован и не требует префиксов -webkit- или -moz- ни в одном современном браузере.
Сравнение с CSSmatic, css.generator.cool и другими инструментами
Большинство онлайн-инструментов для теней текста работают с одним слоем тени. Секция теней текста в CSSmatic предлагает набор ползунков — удобно для простой тени, но наслоить слои для неоновых или 3D-эффектов без ручного написания дополнительных объявлений не получится.
UtiloKit объединяет многослойное наслоение, девять пресетов (каждый загружает полный стек теней одним кликом), редактируемый живой предпросмотр, копирование в один клик в трёх форматах (CSS, Tailwind, React Native) и ссылку для совместного доступа — без регистрации и без загрузки файлов.
text-shadow против box-shadow
Частое заблуждение: text-shadow следует контуру букв, тогда как box-shadow следует прямоугольному блоку элемента. У text-shadow нет ни радиуса распространения, ни ключевого слова inset — поэтому тень текста, в отличие от box-shadow, не может быть внутренней. Используйте text-shadow для заголовков, логотипов и подписей, box-shadow — для карточек и кнопок.
Для имитации вдавленного или штампованного вида на тексте трюк — светлая тень чуть ниже тёмного текста (см. пресет Letterpress), не настоящий inset. Для толстых контуров текста свойство -webkit-text-stroke чище, чем наслаивать восемь направленных теней.
Советы для читаемых теней — и конфиденциальность
Тени — стилистический акцент, а не замена контрасту. Для текста поверх фотографий одна тень с малой прозрачностью вроде 0 1px 3px rgba(0, 0, 0, 0.5) улучшит читаемость без отвлечения. Оставьте тяжёлые эффекты неона и 3D для крупных отображаемых заголовков и всегда проверяйте, что контраст текста соответствует WCAG.
Ничего устанавливать не нужно, аккаунт создавать не нужно. Каждый предпросмотр и каждая строка сгенерированного CSS обрабатываются локально в вашем браузере, поэтому введённый текст никогда не покидает ваше устройство.
Frequently asked questions
Как применить тень к тексту?
Добавьте CSS-свойство text-shadow к любому текстовому элементу. Краткая форма: text-shadow: offset-x offset-y blur-radius color. Например, text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) создаёт мягкую тень 2px вправо и 2px вниз с размытием 4px.
Что такое text-shadow в CSS?
text-shadow — CSS-свойство, рисующее одну или несколько теней позади текста элемента. Каждая тень принимает до четырёх значений: горизонтальное смещение (X), вертикальное смещение (Y), необязательный радиус размытия и цвет — например text-shadow: 1px 1px 2px #000000.
Как добавить тень в CSS?
Для текста используйте text-shadow в правиле элемента, например h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Для блоков, карточек и кнопок используйте box-shadow.
Как добавить тень к тексту в дизайн-инструменте?
В Figma, Sketch или Photoshop добавьте эффект Drop Shadow к текстовому слою и задайте смещение X/Y, размытие и цвет. Эти четыре значения почти один к одному соответствуют CSS: тень Figma X 2, Y 2, Blur 4, чёрный 40% = text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
Как создать эффект светящегося или неонового текста?
Неоновое свечение — это несколько теней одного яркого цвета с нулевым смещением и нарастающим размытием. Например: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; на белом тексте с тёмным фоном. Загрузите пресет Neon здесь — получите мгновенно.
Как создать 3D-текст или длинную тень?
Оба эффекта используют несколько теней со смещением, но без размытия. Для 3D-выдавленного текста наслаивайте слои, уходящие вниз-вправо в постепенно темнеющем цвете. Пресеты 3D и Long shadow формируют эти стеки слоёв автоматически.
Как создать контурный текст с помощью text-shadow?
Разместите четыре (или восемь) жёстких тени вокруг текста — по одной в каждом направлении, с размытием 0. Например: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; даёт белому тексту тонкий тёмный контур.
Как создать несколько теней текста?
Разделяйте их запятыми в одном объявлении text-shadow: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. Браузер рисует их по порядку, первая тень — сверху. Так строятся эффекты неона, 3D, огня и контура.
Может ли text-shadow быть inset (внутренним)?
Нет. В отличие от box-shadow, у text-shadow нет ключевого слова inset и радиуса распространения. Чтобы имитировать гравированный вид на светлом фоне, добавьте едва заметную светлую тень сразу под тёмно-серым текстом, например text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. Пресет Letterpress демонстрирует именно этот трюк.
Как сделать тень текста в Tailwind CSS?
Tailwind CSS v4 включает нативные утилиты теней текста (text-shadow-sm, text-shadow-md, text-shadow-lg). Для произвольного значения используйте произвольное свойство, где пробелы заменяются подчёркиванием: class="[text-shadow:2px_2px_4px_#00000066]".
Нужны ли префиксы -webkit- или -moz- для text-shadow?
Нет. text-shadow полностью стандартизирован и поддерживается без префиксов всеми современными браузерами, так что достаточно просто text-shadow: 1px 1px 2px #000;.
В чём разница между text-shadow и box-shadow?
text-shadow отбрасывает тень от формы глифов (самих букв), box-shadow — от прямоугольного блока элемента. У text-shadow нет радиуса распространения и опции inset; у box-shadow есть оба.
Как добавить тонкую тень для улучшения читаемости текста?
Используйте тёмную мягкую тень с малой прозрачностью, небольшим смещением и несколькими пикселями размытия — например text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Это приподнимает белый или светлый текст над фоном с фотографией или градиентом.
Как этот инструмент сравнивается с CSSmatic и подобными?
В CSSmatic есть секция теней текста, но только один слой — нельзя наслоить несколько теней для неоновых, 3D или контурных эффектов без ручного редактирования кода. UtiloKit — единственный бесплатный инструмент, объединяющий многослойное наслоение, именованные пресеты, живой предпросмотр и экспорт одним кликом в CSS, Tailwind и React Native.
Как скопировать сгенерированный CSS и работает ли инструмент офлайн?
Нажмите «Копировать CSS» для готового объявления, «Копировать Tailwind» для класса произвольного значения, или «Копировать React Native» для эквивалента textShadowColor/textShadowOffset/textShadowRadius. Используйте «Поделиться ссылкой», чтобы сохранить точные настройки в URL. Всё бесплатно, без регистрации, работает локально и продолжает работать без сети после загрузки.
Related tools
Все инструменты
Новое Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты с предпросмотром.
Новое Генератор CSS box-shadow
Создавайте многослойные CSS box-shadow с пресетами и предпросмотром. Копируйте CSS, значение или стиль React мгновенно.
Новое Генератор палитр
Генерируйте комплементарные, аналоговые, триадные и монохромные палитры.
Новое Генератор Cubic Bezier
Создайте кривую плавности CSS, перетаскивая контрольные точки, с предпросмотром.
Новое Генератор border-radius
Визуально создавайте скруглённые углы CSS и органические формы-кляксы.
Новое Песочница CSS Flexbox
Настраивайте свойства flex с живым предпросмотром и копируйте CSS.