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

По порядку: смещение по горизонтали, смещение по вертикали, радиус размытия и растяжение. Первые два двигают тень, третье размывает края, четвёртое раздувает или сжимает саму тень до размытия. Третье и четвёртое необязательны: тень с двумя числами будет резкой копией блока.

box-shadow повторяет прямоугольник блока вместе со скруглением, даже если внутри прозрачная картинка. drop-shadow обводит непрозрачные пиксели содержимого, поэтому тень от PNG с вырезанным фоном получится по контуру объекта. Для карточек и кнопок нужен box-shadow, для логотипов с прозрачностью — drop-shadow.

Обычно из-за сплошного чёрного. Чистый чёрный с большой непрозрачностью гасит цвет под собой и даёт серый налёт. Тень естественнее, когда она полупрозрачная и слегка окрашена в тон фона или самого элемента: например, синеватая под синей кнопкой.

Два-три. Первый — короткий и плотный, отвечает за границу; второй — длинный и мягкий, за глубину; третий добавляют для очень выпуклых элементов. Больше четырёх слоёв заметно грузят отрисовку при анимации и почти не меняют вид.

Разворачивает тень внутрь: она рисуется от краёв блока к центру. Так делают вдавленные поля ввода, внутренние рамки и подсветку по краю. Внутреннюю и внешнюю тень можно смешивать в одном свойстве — просто перечислите слои через запятую.

Технически да, но плавность страдает: браузер пересчитывает размытие на каждом кадре. Приём быстрее — держать готовую тень на псевдоэлементе и анимировать его непрозрачность: размытие считается один раз, а меняется только альфа.

Нет, всё собирается в браузере.