Разница между фильтрами drop-shadow и box-shadow в CSS заключается в том, как они создают тени. 15

Box-shadow создаёт тень, охватывающую весь элемент, включая границы, отступы и области контента. 1 Это свойство используют для добавления теней к обычным элементам, таким как кнопки, карточки, div-элементы и другие. 1

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

Некоторые другие различия:

• Поддержка ключевых слов. 2 Drop-shadow не поддерживает ключевое слово inset, которое превращает тень из внешней во внутреннюю. 2
• Учёт фона. 3 Тень блока, созданная с помощью drop-shadow, выводится под элементом, не учитывая фон, в то время как box-shadow учитывает сплошной фон элемента. 3
• Учёт неоднородной границы. 3 Если граница неоднородная (например, пунктирная), drop-shadow будет учитывать это, а box-shadow нет. 3
• Скорость работы. 4 При других равных условиях drop-shadow выводит внутреннюю тень блока быстрее. 3