La función CSS filter: drop-shadow() añade una sombra a los píxeles visibles reales del elemento — no al cuadro delimitador. Esto la hace perfecta para iconos SVG, logos PNG con transparencia y formas de recorte.
filter: drop-shadow(offsetX offsetY blur color); /* Ejemplo */ filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
/* Para elementos UI rectangulares → box-shadow */
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
/* Para iconos PNG/SVG con transparencia → drop-shadow */
.icon { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
filter: drop-shadow() sigue los píxeles visibles reales del elemento, ideal para PNGs transparentes e iconos SVG. box-shadow envuelve el cuadro rectangular del elemento ignorando la transparencia.
Sí, esta es la principal ventaja de drop-shadow. Sigue la forma real de la imagen, creando una sombra que envuelve el contenido visible en lugar del cuadro delimitador.
No. A diferencia de box-shadow, filter: drop-shadow() no soporta las palabras clave inset o valores de spread. Solo acepta offsetX, offsetY, blur y color.