Verwendung von filter:drop-shadow()

Transparent PNG
🔳 box-shadow
Schatten um die Box herum, nicht die Form
Transparent PNG
☁️ filter: drop-shadow()
Der Schatten folgt der Form!
filter: drop-shadow(10px 60px 0 rgb(0 0 0 /0.5));
Flugzeug
box-shadow: 20px 20px 10px rgb(0 0 0 /0.4);
Flugzeug
filter: drop-shadow(10px 10px 10px rgb(0 0 0 /0.4);
Flugzeug
filteR: drop-shadow(10px 60px 0 rgb(0 0 0 /0.5));

box-shadow kennt keine Alpha-Transparenz in Bildern oder SVG-Formen – es wird der Begrenzungsrahmen des Elements schattiert, nicht dessen sichtbarer Umriss.
filter: drop-shadow() wird auf die gerenderten Pixel angewendet – das bedeutet, dass die sichtbaren Teile des Elements einschließlich der Transparenz berücksichtigt werden.