Today I Learned

Box-shadow vs. drop-shadow from filters

When using box-shadow on an image with transparent background like png, the alpha channel gets neglected and the shadow is applied to the boundaries of the image, eg. box-shadow: 8px 16px 24px rgba(29,35,65,0.4). With CSS filters, like filter: drop-shadow(8px 16px 24px rgba(29,35,65,0.4)) the shadow is coming from the opaque sections of the image. You probably know that already.


Turns out the drop-shadow works the same way on background images. You can apply that effect either on the tag with the background image, or even the whole wrapper to get the same shadow from the text, inline svg icons, images and backgrounds.