CSS Filter() function using drop shadow effect explained and compared to box shadow property
Image effects like drop shadow could be added in CSS to an element using filter() function. We will check drop-shadow in filter function to see how we can use it to add interesting effects to an image and how it compares to the box shadow property.
The drop shadow() function syntax
Firstly we will take a look at its syntax:
drop-shadow(offset-x offset-y blur-radius spread-radius color);
/* Reddish shadow with 1rem blur and .3rem spread */ /* WARNING: not generally supported by browsers */
drop-shadow(.5rem .5rem 1rem .3rem #e23)
As we see it is very much the same as the box shadow property:
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
Common thing is spread radius is not supported by most browsers. So if used will not have any effect.
The drop shadow() and box shadow different effects
We will use the same example of both effects to see the difference here. Therefore we start with the drop shadow() function in this pen:
Basically the drop shadow has added the shadow similar to the shape of the image. Whatever the shape , it follows it along. It does not care about the container box which is always rectangular by default.
The box shadow example
Generally the main difference is about the box. The box shadow property follows the box itself to create the shape of the shadow. Therefore it does not really care about the image shape.Do if you make the box round with border radius it will follow a circle then.
As a result it is up to our decision of which one is more suitable in our cases. They both do really the same job but in a different ways.
Also drop–shadow filters have the advantage of hardware acceleration if the browser vendor supports it while box–shadow does not have access to that code. The drop–shadow filter also will tend to render faster