Как сделать тень блока в css

Чтобы добавить тень блоку в CSS, нужно использовать свойство box-shadow.

Вот пример тени, которую можно добавить для блока:

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

Здесь мы определили блок с классом «box» и установили ему ширину, высоту и цвет фона. Далее мы использовали свойство box-shadow для добавления тени, которая будет иметь смещение 0px по оси X и 0px по оси Y, радиус 10px и свойство rgba, которое определяет цвет тени и ее прозрачность.

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

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.5);
}

Здесь мы имеем тень, которая будет иметь смещение -2px по оси X и -2px по оси Y, радиус 5px и прозрачность 0,5.

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

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать тень блока в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали