CSS Filter() function using drop shadow effect explained and compared to box shadow property

CSS Filter() function using drop shadow effect explained and compared to box shadow property

22nd April 2019 0 By Azadeh

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);

An example:

/* 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:

See the Pen Drop Shadow filter function explained by Azadeh Faramarzi (@azad6026) on CodePen.

See the Pen Drop Shadow filter function explained on CodePen.

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

As a comparison we need to check on the same example of box shadow property:

See the Pen Box Shadow proeprty expalined by Azadeh Faramarzi (@azad6026) on CodePen.

See the Pen Box Shadow proeprty expalined on CodePen.

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 dropshadow filters have the advantage of hardware acceleration if the browser vendor supports it while boxshadow does not have access to that code. The dropshadow filter also will tend to render faster