Пять значений по порядку
box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.12);
/* │ │ │ │ └ цвет, обычно с прозрачностью
│ │ │ └ растяжение: увеличить (+) или сжать (−) до размытия
│ │ └ размытие: насколько мягкий край
│ └ смещение по Y: положительное — вниз
└ смещение по X: положительное — вправо */
Добавьте inset в начало, чтобы рисовать внутри, а не снаружи.
Почему одна тень никогда не выглядит правильно
Посмотрите на любой предмет на столе. Есть тёмная плотная тень в месте касания
поверхности и гораздо более широкая и бледная, расходящаяся в стороны. Один
box-shadow даёт либо ту, либо другую.
Обычно хватает двух слоёв:
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px -4px rgba(15, 23, 42, 0.12);
Первый слой ставит элемент на поверхность. Второй придаёт ему высоту.
Цвет важнее прозрачности
Чисто чёрная тень с малой прозрачностью делает всё под собой серым и слегка грязным. Подкрашивание тени в сторону тона фона — сине-серый на холодной странице, тёплый коричневый на кремовой — и есть разница между тенью, которую спроектировали, и тенью, которую оставили по умолчанию.
Порядок слоёв
Слои рисуются сверху вниз: первый в списке оказывается впереди. Это важно, когда они перекрываются разными цветами.
Всё считается в браузере
Превью — настоящий элемент с вашим настоящим объявлением, поэтому вы видите ровно то, что даёт CSS. Никуда ничего не отправляется.
Вопросы
Чем размытие отличается от растяжения?+
Размытие смягчает край тени, не меняя её размера. Растяжение увеличивает или уменьшает саму тень до применения размытия. Небольшое отрицательное растяжение при большом размытии — приём, стоящий за большинством «дорогих» теней: тень остаётся под элементом, а не образует ореол вокруг него.
Зачем несколько слоёв?+
Реальный свет даёт плотную контактную тень прямо под предметом и широкую мягкую поодаль. Одна тень может быть либо плотной, либо мягкой. Два-три слоя с разным размытием — это и есть разница между современной высотой и drop shadow из 2010 года.
Что делает inset?+
Рисует тень внутри элемента, а не снаружи: так получается нажатая кнопка, утопленное поле или аккуратная внутренняя кромка. Inset и внешние тени можно смешивать в одном объявлении.
Тени вредят производительности?+
Статичная тень дешёвая. Анимация `box-shadow` — нет: она заставляет перерисовывать элемент каждый кадр. Если тень должна меняться по наведению, анимируйте `opacity` псевдоэлемента, несущего большую тень.