Главная > Дизайн > Генератор тени CSS

Рекомендуемые инструменты

Палитра ЦветовГенератор CSS-градиентовКонвертер PX в PTКонвертер PX в REMКонвертер PX в EMОнлайн-фонарик / ночник для экранаОнлайн-тест битых пикселейОнлайн Предварительный Просмотр SVGОбрезка Закругленных УгловКомпоновщик слоев изображений

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

Визуальный генератор box-shadow с поддержкой внутренней/внешней тени, прозрачности и предпросмотра

px
px
px
px
%
Превью тени
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

Обзор инструмента: CSS Box Shadow генератор

CSS Box Shadow генератор помогает быстро создавать тени с визуальными настройками. Поддерживает внутреннюю и внешнюю тень, предпросмотр в реальном времени и готовый CSS код.

Что такое CSS Box Shadow генератор?

Инструмент позволяет настроить смещение, размытие, расширение и цвет, затем автоматически генерирует box-shadow.

Как пользоваться

  1. Настройте смещение, размытие и расширение.
  2. Выберите цвет и прозрачность.
  3. Включите inset, если нужна внутренняя тень.
  4. Скопируйте сгенерированный CSS код.

Частые сценарии

  • Добавить глубину карточкам, кнопкам и панелям
  • Быстро перевести дизайн в CSS
  • Настроить силу и направление тени
  • Сделать легкую визуальную «поднятость»

❓ FAQ

Q1: Тень слишком сильная или слабая.
A: Сначала настройте размытие и прозрачность, затем расширение.

Q2: Направление тени неверное.
A: Положительные значения смещают вправо/вниз, отрицательные влево/вверх.

Q3: Когда использовать inset?
A: Для эффектов внутреннего углубления, например у полей ввода.

Функции

  • Живой предпросмотр
  • Полный контроль параметров
  • Переключение внутренней/внешней тени
  • Копирование в один клик

Параметры

  • Offset X / Y: Горизонтальное и вертикальное смещение
  • Blur: Степень размытия
  • Spread: Расширение/сжатие тени
  • Color: Цвет и прозрачность

Примеры CSS

box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);

box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.25);

Советы

  1. Для карточек используйте больше размытия и меньше прозрачности.
  2. Для hover увеличьте размытие и уменьшите смещение.
  3. Несколько теней создают более глубокий эффект.