Генератор text-shadow CSS
Бесплатный онлайн-генератор text-shadow CSS. Складывайте несколько слоёв тени со смещением, размытием, цветом и прозрачностью, пробуйте пресеты «Неон», «3D», «Ретро» и мгновенно копируйте CSS.
Что такое свойство CSS text-shadow?
text-shadow добавляет эффекты тени к глифам текста. Каждая тень задаётся горизонтальным смещением, вертикальным смещением, необязательным радиусом размытия и цветом, а несколько теней можно объединить в одном значении через запятую для создания насыщенных эффектов.
Как работают несколько слоёв тени?
Слои рисуются снизу вверх в порядке объявления, поэтому первая тень списка оказывается сверху. Этот генератор позволяет добавлять, удалять, включать и отключать слои, у каждого свои смещение, размытие, цвет и прозрачность — так собираются эффекты вроде «Неон» или «3D».
Что означают смещение X, смещение Y и размытие?
Смещение X двигает тень влево или вправо от глифов, смещение Y — вверх или вниз, а радиус размытия смягчает её края: 0 даёт жёсткую границу, как в стилях «Ретро» или «Контур», а большие значения растекают цвет, как свечение.
Как сделать неоновое свечение?
Возьмите пресет «Неон» или задайте несколько слоёв с нулевыми смещениями, одним ярким цветом и последовательно растущим размытием, например 0 0 3px, 0 0 8px и 0 0 20px. Сложенные ореолы имитируют свет неоновой трубки.
Влияет ли text-shadow на производительность отрисовки?
Несколько статичных слоёв стоят дёшево, но текст со множеством сильно размытых теней дороже перерисовывать. Тяжёлые тени на длинных абзацах или постоянная анимация text-shadow могут вызывать просадки кадров на слабых и мобильных устройствах: используйте короткие заголовки, умеренное размытие или анимируйте прозрачность.
Как сделать тень полупрозрачной?
У каждого слоя есть ползунок прозрачности, который переводит выбранный цвет в запись rgba, например rgba(0, 0, 0, 0.5). Полупрозрачные тени естественно сливаются с любым фоном — на этом построен мягкий эффект тиснения в пресете «Бумага».
В чём разница между text-shadow и box-shadow?
text-shadow применяется к форме глифов текста и не имеет значений распространения и внутренней тени, а box-shadow окружает прямоугольный блок любого элемента. Синтаксис смещения и размытия общий, но одно не заменяет другое.
Какие браузеры поддерживают text-shadow?
text-shadow поддерживается всеми современными браузерами, включая Chrome, Firefox, Safari, Edge и Opera, и больше десяти лет работает стабильно без префиксов. Многослойные тени ведут себя одинаково везде.
Отправляется ли введённое на сервер?
Нет. Текст предпросмотра и все настроенные слои остаются в вашем браузере, CSS формируется локально на странице. По сети ничего не передаётся, поэтому после загрузки инструмент работает и офлайн.
Как использовать Генератор text-shadow CSS
Проектируйте тени текста CSS, складывая слои, вместо того чтобы гадать с одним смещением. Каждое изменение отрисовывается на крупном живом тексте предпросмотра, а CSS генерируется локально в вашем браузере.
- Введите свои слова в поле «Текст предпросмотра», чтобы проверить эффект на настоящем тексте.
- Попробуйте пресет: «Неон», «Бумага», «3D», «Ретро», «Свечение» или «Контур» загружает готовые слои.
- Настройте для каждого слоя смещение X, смещение Y, размытие, цвет и прозрачность его ползунками.
- Используйте «Добавить слой», чтобы складывать больше теней, снимите галочку со слоя, чтобы отключить его, или удалите значком корзины.
- Скопируйте сгенерированное правило text-shadow и вставьте его в свою таблицу стилей.
Неоновое свечение лучше всего выглядит из трёх-четырёх слоёв одного цвета с растущим размытием — держите смещения на нуле и дайте размытию делать работу.
Похожие инструменты
- Генератор CSS Box Shadow Бесплатный онлайн-генератор CSS box-shadow. Визуально создавайте красивые тени с настраиваемыми смещением, размытием, расширением, цветом и inset. Живой предпросмотр и мгновенное копирование кода.
- Генератор CSS-градиентов Создавайте потрясающие CSS-градиенты визуально. Генерируйте линейные, радиальные и конические градиенты с несколькими цветовыми точками, углами и позициями. Мгновенно копируйте готовый CSS-код.
- Генератор Красивых Шрифтов Бесплатный генератор красивых шрифтов с 28 стилями Юникода. Создавайте жирный, курсивный, готический текст и текст в кружках для Instagram, TikTok, WhatsApp и игровых ников.
- Генератор Border Radius Бесплатный онлайн генератор border-radius. Перетащите 8 маркеров или выберите пресет капли, чтобы создать органичные CSS-формы и мгновенно скопировать код.
- Конвертер цветов Бесплатный онлайн-конвертер цветов. Мгновенное преобразование HEX, RGB, HSL, HSV с визуальным пикером. 100% конфиденциально, работает в браузере.
- Генератор CSS easing Бесплатный онлайн-генератор easing для CSS. Перетаскивайте контрольные точки cubic-bezier на интерактивной кривой, выбирайте из 18 пресетов, смотрите зацикленную анимацию шарика и мгновенно копируйте функцию тайминга.
- Генератор CSS clip-path Бесплатный онлайн-генератор CSS clip-path. Создавайте формы polygon, circle, ellipse и inset с перетаскиваемыми точками, живым предпросмотром и копированием CSS в один клик.
- Форматировщик CSS Мгновенно форматируйте и beautify CSS-код. Преобразуйте минифицированный CSS в читаемый код с настраиваемыми параметрами.