🌫️

Генератор теней CSS

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

Инструменты-генераторы Работает локально Данные не отправляются
cssbox-shadowгенератордизайн
Слои
Смещение X4px
Смещение Y4px
Размытие8px
Распространение0px
%
Внутренняя тень

Что такое генератор теней CSS?

Генератор теней CSS позволяет визуально создавать значения box-shadow и мгновенно копировать CSS. Настраивайте смещения, размытие, распространение, цвет и непрозрачность с предпросмотром в реальном времени.

Как использовать генератор теней

  1. Настройте ползунки смещения X/Y, размытия и распространения.
  2. Выберите цвет тени и задайте непрозрачность.
  3. Включите «Внутренняя тень» для эффекта внутренней тени.
  4. Добавьте дополнительные слои для сложных теней.
  5. Скопируйте CSS и вставьте в свой проект.

Похожие инструменты

🌈
генератор градиентов CSS
Создавайте линейные и радиальные градиенты CSS
🖌️
выбор цвета
Выбирайте и конвертируйте цвета между форматами
🎨
Форматировщик CSS
Форматирование и улучшение читаемости CSS-кода
Подробнее▾
Параметры box-shadow
  • Смещение по X/Y —сдвигает тень по горизонтали и вертикали
  • Размытие —насколько мягкий/размытый край тени
  • Распространение —увеличивает или уменьшает размер тени
  • Внутренняя тень —отрисовывает тень внутри элемента
Часто задаваемые вопросы
Можно добавить несколько теней?

Да. Нажмите «Add Layer», чтобы добавить несколько значений box-shadow; в выходном CSS они объединяются запятыми.

Как использовать сгенерированный CSS?

Нажмите «Copy CSS» и вставьте свойство box-shadow непосредственно в CSS-файл или блок стилей.