Какие значения box-shadow подходят для создания эффекта легкой карточки?

Популярная мягкая тень для карточки использует два слоя: 0 1px 3px rgba(0,0,0,0.12) для ближней тени и 0 1px 2px rgba(0,0,0,0.24) для четкости. Tailwind CSS использует 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) для своей стандартной утилиты теней.

Генератор CSS Box Shadow

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

БесплатноБез регистрацииОбновлено мар 2026

Генератор CSS Box ShadowПопробуйте — бесплатно ▼

Быстрые примеры:

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

↕ Тяните для смещения

Слои тени

Настройки слоя

Смещение X px

Смещение Y px

Размытие px

Размах px

Цвет

Непрозрачность %

Внутренняя тень (Inset)

Готовые пресеты

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

Embed Генератор CSS Box Shadow Widget

О Генератор CSS Box Shadow

Генератор CSS Box Shadow позволяет визуально проектировать эффекты box-shadow и мгновенно копировать готовый CSS-код. Накладывайте несколько слоев тени, выбирайте из кураторских пресетов, вдохновленных Material Design, Tailwind CSS и неоморфизмом, или перемещайте тень перетаскиванием прямо в области предпросмотра. Все процессы выполняются в вашем браузере — ваш код никогда не покидает страницу.

Как использовать Генератор CSS Box Shadow

Настройте параметры тени — Используйте ползунки для установки горизонтального смещения (X), вертикального смещения (Y), радиуса размытия (blur) и радиуса размаха (spread). Вы также можете перетаскивать курсор прямо в области предпросмотра для интуитивного изменения положения тени.
Выберите цвет и непрозрачность — Подберите цвет тени с помощью палитры и настройте прозрачность с помощью ползунка opacity. Предпросмотр обновляется в реальном времени.
Добавьте слои или пресеты — Нажмите + Добавить слой тени для создания реалистичной глубины. Или выберите готовый пресет (Material, Tailwind, Neumorphism и др.), чтобы начать с проверенного дизайна.
Скопируйте CSS — Нажмите Копировать, чтобы получить сгенерированный код box-shadow и вставить его непосредственно в вашу таблицу стилей.

Понимание синтаксиса box-shadow

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y

Горизонтальное и вертикальное смещение тени. Положительные значения сдвигают тень вправо/вниз, отрицательные — влево/вверх.

blur-radius

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

spread-radius

Расширяет или сжимает тень. Положительные значения увеличивают ее размер, отрицательные — уменьшают (полезно для тонких эффектов под элементом).

inset

При использовании этого параметра тень отрисовывается внутри элемента. Часто применяется для эффекта нажатых кнопок и полей ввода.

Советы по созданию профессиональных теней

Многослойность — Реальные объекты отбрасывают сложные тени. Использование 2-3 слоев (мягкий фоновый слой + четкий слой от основного источника света) дает гораздо более реалистичный результат, чем одна тень.
Низкая непрозрачность — Тени с непрозрачностью 8–20% выглядят естественно. Избегайте черных теней с высокой плотностью — они могут выглядеть грубо и старомодно.
Единое направление света — Сохраняйте одинаковые смещения теней во всем интерфейсе, чтобы имитировать один источник света. Противоречивые тени разрушают визуальную иллюзию.
Цветные тени — Вместо чисто черного попробуйте использовать более темный оттенок фонового цвета элемента для создания более гармоничного и современного образа.
Отрицательный размах (spread) — Отрицательное значение spread делает тень меньше самого элемента, создавая тонкую контактную тень, которая «заземляет» объект без видимых краев по бокам.

Часто задаваемые вопросы

Что такое свойство CSS box-shadow?

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

Как создать несколько теней для блока в CSS?

Несколько теней создаются путем перечисления определений через запятую. Например: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Каждая тень отрисовывается поверх предыдущей в списке.

В чем разница между box-shadow и drop-shadow?

box-shadow применяет тень к прямоугольному контейнеру элемента, а filter: drop-shadow() учитывает реальную форму объекта, включая прозрачные участки (например, в PNG или SVG). box-shadow поддерживает размах и внутренний режим, которых нет у drop-shadow.

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

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

Какие значения подходят для легкой тени карточки?

Для создания современного эффекта часто используют два слоя: 0 1px 3px rgba(0,0,0,0.12) и 0 1px 2px rgba(0,0,0,0.24). В Tailwind CSS стандартная тень определяется как 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1).

Ссылайтесь на этот контент, страницу или инструмент так:

"Генератор CSS Box Shadow" на сайте https://ru.miniWebtool.com/генератор-css-box-shadow/ от MiniWebtool, https://MiniWebtool.com/

команда miniwebtool. Обновлено: 2026-03-07