box-shadow

Свойство CSS box-shadow позволяет создать тень у элемента. С их помощью, например, можно придать элементу объем, и сделать более привлекательный дизайн. Сразу пример с поддержкой браузеров.

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

Синтаксис такой:

box-shadow: inset [горизонтальное смещение] [вертикальное смещение] [радиус размытия] [опционально радиус растяжения] [цвет];

1. inset (необязательно): если указано, то тень будет внутри объекта. Можно использовать для создания эффекта вдавленности.
2. Горизонтальное смещение (обязательно): положительное означает, что тень будет справа, отрицательное поместит тень слева от элемента.
3. Вертикальное смещение (обязательно): отрицательное означает, что тень будет выше, положительное, что тень будет ниже объекта.
4. Радиус размытия (обязательно): если установлено значение 0, тень будет резкой, чем выше число, тем более размытой она будет и тем дальше будет расширяться тень. Например, тень с горизонтальным смещением 5 пикселей, которая также имеет радиус размытия 5 пикселей, станет размером в 10 пикселей.
5. Радиус растяжения (необязательно): положительные значения увеличивают размер тени, отрицательные значения его уменьшают. По умолчанию – 0 (размер тени такой же, как у размытия).
6. Цвет (обязательно): принимает любое значение цвета, например, hex, named, rgba или hsla. Если значение цвета пропущено, тени отображаются в цвете текущего значения color. Имейте в виду, что старые браузеры WebKit (до Chrome 20 и Safari 6) игнорируют правило, когда цвет не указан.

Инструкция box-shadow: none; отменяет тень.

Несколько теней

Box-shadow дает возможность создать сразу несколько теней для одного объекта. Инструкции для каждой тени разделяются запятыми. Пример:
box-shadow:
  inset 5px 5px 10px #000000,
  inset -5px -5px 10px blue;

Первая тень выводится выше всех, а каждая следующая в списке ниже, под предыдущими тенями. Тень не влияет на компоновку элементов. Внешние тени рисуются под фоном элемента, внутренние – над фоном. Тень не вызывает прокрутку и не влияет на размер прокручиваемой области.

Закругленные углы у тени

Тень со скругленными углами можно сделать используя свойство border-radius.

Примеры

Простая тень

See the Pen
box-shadow – простая тень by Андрей (@adlibi)
on CodePen.

Внутренняя тень

See the Pen
box-shadow – внутренняя тень by Андрей (@adlibi)
on CodePen.

Тень с одной стороны

See the Pen
box-shadow – тень с одной стороны by Андрей (@adlibi)
on CodePen.

Несколько границ с помощью теней

See the Pen
box-shadow – несколько границ с помощью тени by Андрей (@adlibi)
on CodePen.

Разные эффекты выпуклости и вогнутости с помощью теней

See the Pen
box-shadow – разные эффекты тени by Андрей (@adlibi)
on CodePen.

Очень мягкая тень (сделано с помощью нескольких теней с разной прозрачностью)

See the Pen
box-shadow – мягкая тень by Андрей (@adlibi)
on CodePen.

Если окрасить тень в подходящий цвет и сделать сильное размытие, то получится эффект свечения.

В интернет можно найти конструкторы – генераторы теней. На них вы можете задать параметры для своих теней и получить на выходе готовый код.