Как добавить тень блоку CSS

Для добавления тени блоку в CSS используйте свойство box-shadow. Вот пример:

<div class="box"></div>

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

Здесь box-shadow — свойство, которое добавляет тень к блоку. Его значениями являются:

• Первое значение описывает горизонтальное смещение тени относительно элемента (0px в нашем случае).
• Второе значение описывает вертикальное смещение тени относительно элемента (0px в нашем случае).
• Третье значение описывает размытие тени (10px в нашем случае). Чем больше значение, тем более размыта тень.
• Четвертое значение описывает цвет тени (rgba(0, 0, 0, 0.5) в нашем случае). Он может быть задан в формате HEX, RGB или RGBA.

Также можно добавить несколько теней, разделяя их запятой. Например:

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

Здесь мы добавляем две тени с различной «толщиной». Обратите внимание, что браузеры не могут использовать несколько теней на одном элементе для старых версий.