Тень на изображении с прозрачностью

Как на CSS сделать тень на прозрачном изображении формата png или webp, чтобы тень падала не от контейнера изображения, а непосредственно от контуров самого изображения.

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

<img src="stul.png" />

Чтобы на демо вам отчётливо было видно тень, добавлять тень будем при наведении курсора на наше изображение. То есть через псевдокласс hover. Саму тень напишем как обычно через CSS-свойство box-shadow

img:hover {
    box-shadow: 3px 3px 5px #9e00b9;
}

Если при наведении мы просто зададим тень как указано выше, то получим следующий результат (наведите курсор на изображение):

Как видите, наша тень отбивается от границы контейнера нашего изображения.

Для того чтобы тень была не от контейнера изображения, а от самого стула внутри прозрачности, для этого тень реализуем через CSS-свойство filter где в значении указываем функцию drop-shadow() куда параметроми и передаём нашу тень:

img:hover {
    filter: drop-shadow(3px 3px 5px #9e00b9);
}

Теперь попробуйте навести курсор на изображение:

Как видите, теперь тень стала отбивать от каждого контура стула.

Это также сработает и для изображений указанных как фон через CSS-свойства background и background-image.