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; 
}

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

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

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