CSS · ТЕНИ · ПРЕДПРОСМОТР
Создайте CSS-тень.
Сразу увидьте результат.
Настройте тень элемента или текста и получите готовое свойство CSS. Этот генератор box-shadow и text-shadow подходит для кнопок, карточек, заголовков и других элементов интерфейса.
Добавьте один или несколько слоёв, задайте горизонтальное и вертикальное смещение, размытие, цвет и прозрачность. Для box-shadow доступны растяжение и внутренняя тень inset; каждый параметр сразу меняет предпросмотр и код.
Выберите готовый пресет, создайте одну базовую тень в упрощённом режиме или соберите многослойный эффект. Скопируйте CSS и вставьте его в таблицу стилей проекта.
Один слой без растяжения и inset. Дополнительные слои сохраняются.
01 / ГЕНЕРАТОР
Настройте тень
Тень элемента
box-shadow
Тень текста
text-shadow
CSS тень · CSS shadow
Настройте внешнюю или внутреннюю тень элемента. Каждый слой можно менять отдельно.
БЫСТРЫЕ ПРЕСЕТЫ
До 5 слоёв в полном режиме
Добавьте аккуратный акцент или несколько слоёв для свечения текста.
БЫСТРЫЕ ПРЕСЕТЫ
До 5 слоёв в полном режиме
Слой тени
ГОТОВЫЙ CSS
box-shadow
Предпросмотр и CSS обновляются сразу, без перезагрузки страницы.
Возможности CSS генератора тени
- Создание внешней и внутренней тени элемента с помощью
box-shadow. - Настройка тени текста через
text-shadowи проверка своего текста в предпросмотре. - Несколько слоёв с отдельными смещением, размытием, растяжением, цветом и прозрачностью.
- Готовые пресеты, упрощённый режим, мгновенный предпросмотр и копирование готового CSS.
- Русские пояснения и стандартные английские названия CSS-свойств.
Растяжение и inset применяются только к box-shadow. У свойства text-shadow растяжения и внутреннего режима нет — для него доступны смещение, размытие, цвет и прозрачность.