Генератор box-shadow

Як це працює

Значення йдуть саме в такому порядку: зсув-X зсув-Y розмиття розтягнення колір. Перші два зміщують тінь, третє її розмиває, четверте — роздуває або підтискає.

Найчастіша плутанина — розмиття й розтягнення. Розмиття робить край м'яким, не змінюючи розміру плями. Розтягнення змінює саме розмір: додатне робить тінь більшою за елемент, від'ємне — меншою. Тому «м'яка велика тінь» — це велике розмиття, а не велике розтягнення.

inset перевертає тінь усередину — нею роблять вдавлені поля й перемикачі.

Кілька тіней одразу

Тіней може бути кілька через кому: box-shadow: 0 1px 2px #0002, 0 8px 24px #0003; — так набирають природне світло, бо реальна тінь має і різкий близький, і м'який далекий шар.