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

Короткий ответ

box-shadow принимает смещение по горизонтали и вертикали, размытие и цвет:

<div style="margin: 8px; padding: 16px; border-radius: 12px; box-shadow: 0 4px 12px rgb(0 0 0 / 20%);">A card with a shadow</div>

Полупрозрачный чёрный выглядит естественнее сплошного серого: тень смешивается с любым фоном.

Мягкая многослойная тень

Несколько теней через запятую дают более реалистичный объём, а четвёртое число — растяжение — увеличивает или уменьшает тень. Ключевое слово inset делает тень внутренней:

<div style="display: flex; gap: 16px; padding: 12px;">
  <div style="padding: 16px; border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 8px 24px -4px rgb(0 0 0 / 20%);">Layered</div>
  <div style="padding: 16px; border-radius: 12px; box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%);">Inset</div>
</div>

Тень при наведении

Так карточка «приподнимается»:

<style>
  .card { margin: 8px; padding: 16px; border-radius: 12px; border: 1px solid gainsboro; transition: box-shadow 0.2s; }
  .card:hover { box-shadow: 0 8px 20px rgb(0 0 0 / 25%); }
</style>
 
<div class="card">Hover over me</div>

Для тени у текста есть отдельное свойство text-shadow — о нём ответ «Как добавить тень тексту».

Частая ошибка

Тень обрезается, если у родителя стоит overflow: hidden и нет отступа: тень рисуется за пределами блока, а родитель прячет всё, что выходит за его край. Добавьте родителю padding или уберите обрезку.