CSS-генератор

Генератор CSS Shadow

Настраивайте box-shadow и text-shadow визуально, объединяйте слои и копируйте готовый CSS.

Слои тени

Настройки тени

Пресеты

Предпросмотр

Вид предпросмотра

Сгенерированный CSS

.shadow-box {
  box-shadow: 0px 18px 40px -12px rgba(99, 102, 241, 0.55);
}

Из чего состоит CSS-тень

box-shadow включает смещение по горизонтали и вертикали, радиус размытия, растяжение, цвет и необязательное значение inset. Для text-shadow используются смещения, размытие и цвет. Настройки сразу обновляют готовое CSS-правило, поэтому влияние каждого значения видно в реальном времени.

Создавайте глубину несколькими слоями

Несколько мягких теней обычно выглядят естественнее одной тяжёлой. Сочетайте короткий тёмный слой для контакта с широкой размытой тенью для высоты или накладывайте цветные слои для свечения. Добавляйте и удаляйте слои, пока эффект не подойдёт интерфейсу.

От предпросмотра к рабочему CSS

Выберите box-shadow или text-shadow, начните с пресета, затем настройте положение, размытие, растяжение, прозрачность, радиус и цвета предпросмотра. Скопируйте CSS и обязательно проверьте тень на реальном фоне и в адаптивных состояниях проекта.

Изучайте и продолжайте работу

Помогите улучшить этот инструмент

Инструмент сработал так, как вы ожидали?

Отправьте короткое сообщение со скриншотом или примером файла. Название инструмента мы подставим автоматически.