Как сделать тень у блока через box-shadow?
Хочу, чтобы карточка немного «парила» — с мягкой тенью под ней. Видел свойство box-shadow, но в нём четыре числа и я не понимаю, что они значат. Как сделать аккуратную тень?
2 ответа
box-shadow принимает несколько значений по порядку: сдвиг-по-X сдвиг-по-Y размытие растяжение цвет.
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
Разбор по числам:
0— горизонтальный сдвиг (тень не уходит влево/вправо);4px— вертикальный сдвиг (тень падает чуть вниз, как от света сверху);12px— радиус размытия (чем больше, тем мягче и расплывчатее);- (необязательное 4-е число) — растяжение тени во все стороны;
rgba(0,0,0,0.15)— цвет с прозрачностью; полупрозрачный чёрный выглядит естественнее, чем сплошной.
Для «парящей» карточки берите небольшой сдвиг вниз и хорошее размытие — это даёт мягкую реалистичную тень. Можно усилить эффект при наведении:
.card { transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
Ещё фишки: можно перечислить несколько теней через запятую для глубины; ключевое слово inset делает тень внутренней (вдавленный эффект). Частая ошибка новичков — сплошной чёрный без прозрачности: тень выходит грязной и неестественной.
Совет по вкусу: реалистичнее смотрятся две тени сразу — одна близкая и резкая, вторая дальняя и размытая:
box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.12);
Так тень получается «слоёной», как в дизайн-системах. И не делайте тень слишком тёмной — лёгкость почти всегда выглядит дороже.