box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <color>

x-offset — горизонтальне зміщення. Позитивне значення зміщує тінь праворуч від блоку, негативне – ліворуч. Обов'язкове значення.

y-offset — вертикальне зміщення. Позитивне значення зміщує тінь вниз, негативне - вгору. Обов'язкове значення.

blur — радіус розмиття. Чим більше значення, тим сильніше розмита тінь. Необов'язкове значення.

spread — радіус поширення. Позитивне значення збільшує тінь, негативне — зменшує. Необов'язкове значення.

color — колір тіні. Можна використовувати будь-який формат запису кольору. Необов'язкове значення.

.box {
width: 400px;
height: 400px;
backgroud-color: red;
box-shadow: 10px -10px 10px 12px red;
}

Багатошарова тінь

box-shadow: <x-offset> <y-offset> <blur> <spread> <color>,
<x-offset> <y-offset> <blur> <spread> <color>,
<x-offset> <y-offset> <blur> <spread> <color>,

Можна зробити дкілька тіней

.box {
width: 400px;
height: 400px;
backgroud-color: red;
box-shadow: 10px -10px 10px 12px red, -10px 10px 10px 12px blue;
}

Внутрішня тінь

Синтаксис оголошення внутрішньої тіні аналогічний синтаксису звичайної тіні, але першим значенням необхідно вказати inset.

box-shadow: unset <x-offset> <y-offset> <blur> <spread> <color>