Как создать CSS-тень?

Используйте ползунки, чтобы задать смещение по X, смещение по Y, радиус размытия и растяжение. Выберите цвет тени и при необходимости включите опцию внутренней тени. Инструмент генерирует CSS-код автоматически и показывает живой предпросмотр.

Можно ли добавить несколько теней на один элемент?

Да. Нажмите кнопку «+ Добавить», чтобы создать дополнительные слои тени. У каждой тени есть независимые настройки смещения, размытия, растяжения, цвета и внутренней вставки. Несколько теней объединяются в одно CSS-свойство.

Что такое внутренняя тень?

Внутренняя тень отображается внутри элемента, а не снаружи. Она создаёт эффект нажатия или углубления и часто используется для полей ввода, карточек и неоморфных дизайнов.

В чём разница между размытием и растяжением в box-shadow?

Размытие управляет тем, насколько мягкими или рассеянными выглядят края тени. Растяжение управляет размером тени: положительные значения делают её больше элемента, отрицательные — меньше.

Как сделать тонкую современную тень?

Используйте небольшое смещение по Y (4–8px), умеренное размытие (10–20px), нулевое растяжение и полупрозрачный чёрный цвет, например rgba(0,0,0,0.1). Так получается мягкий «приподнятый» вид, характерный для современного UI.

Можно ли скопировать сгенерированный CSS box-shadow?

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

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

Создавайте CSS-тени с живым визуальным редактором. Добавляйте несколько теней, настраивайте смещение, размытие и растяжение.

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

Генератор теней — визуальный CSS-инструмент, который позволяет создавать тени без написания кода вручную. Настраивайте смещение, размытие, растяжение и цвет интуитивными ползунками и мгновенно видите результат. Инструмент поддерживает несколько слоёв тени и внутренние тени, покрывая все распространённые сценарии теней в веб-дизайне.

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

Начните с тени по умолчанию и настройте её ползунками по своему вкусу. Окно предпросмотра обновляется в реальном времени, так что вы точно видите, как выглядит тень.

Перетаскивайте ползунок смещения по X, чтобы двигать тень влево или вправо.
Перетаскивайте ползунок смещения по Y, чтобы двигать тень вверх или вниз.
Настройте ползунок размытия, чтобы управлять мягкостью краёв тени.
Настройте ползунок растяжения, чтобы увеличивать или уменьшать размер тени.
Выберите цвет тени с помощью палитры или введите значение hex.
Включите переключатель внутренней тени, чтобы разместить тень внутри элемента.

Чтобы добавить второй слой тени, нажмите «+ Добавить» и настройте его отдельно. Слоёв может быть сколько угодно. Нажмите на иконку X на вкладке тени, чтобы удалить её.

Советы по созданию эффективных теней

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

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

Частые сценарии использования

Приподнятые карточки и панели в макетах дашбордов.
Эффекты наведения и активного состояния кнопок с многослойными тенями.
Эффекты фокуса полей ввода с внутренними тенями.
Эффекты глубины для модальных окон и всплывающих элементов.
Неоморфный UI с комбинацией внутренних и внешних теней.

Зачем нужен генератор теней?

CSS-свойство box-shadow требует согласования пяти значений: смещения по X, смещения по Y, размытия, растяжения и цвета. Подбирать их вручную приходится с постоянными перезагрузками браузера. Этот генератор позволяет экспериментировать визуально и копировать чистый CSS-код, когда результат устраивает, экономя время и избавляя от догадок.