Let’s take a closer look at the CSS drop-shadow property.
What Is CSS drop-shadow?
drop-shadow( ) is a CSS effect that displays a shadow around the shape of a specified object. Here’s the syntax for applying a CSS drop-shadow.
There are a wide range of filter functions including blur( ), brightness( ), and drop-shadow( ).
offset-x determines the horizontal distance and offset-y determines the vertical distance. Note that negative values place the shadow to the left (offset-x) and above (offset-y) the object.
The last two parameters are optional. You can specify the blur radius of the shadow as a length. By default, it’s set to 0. You cannot have a negative blur radius.
The color of the shadow is specified as
When Is CSS drop-shadow Useful?
You may already know that box-shadow does the job pretty well. So, you may think, why do we need drop-shadow at all? There are numerous cases where the drop-shadow( ) function is a lifesaver. Let’s take a look at a few of them:
Non-Rectangular Shapes
Unlike a box-shadow, you can add a drop-shadow to non-rectangular shapes. For instance, we have a transparent SVG or PNG with a non-rectangular shape—a star for instance. Here, adding a shadow that corresponds to the object itself can be completed with either box-shadow or drop-shadow. Consider both scenarios:
HTML
CSS
Output:
When comparing both effects, it’s apparent that a box-shadow gives a rectangular shadow; it also doesn’t matter whether the image is transparent or already possesses a background. On the other hand, drop-shadow allows you to create a shadow that conforms to the shape of the image itself.
The limiting factors are that the drop-shadow( ) function accepts all parameters of type
Grouped Elements
There are several instances when you may need to build components by overlapping certain elements. If you’re using box-shadow, you’ll face the issue of trying to cast a shadow the right way. Here’s how it works when grouping an image and a text component:
HTML
Basic CSS
Now, apply the box-shadow and drop-shadow to see the difference.
Output:
As you can see, the box-shadow is applied on each element individually while the drop-shadow groups both of them and applies the shadow.
Clipped Elements
You can use the clip-path property to clip a certain region that determines what parts of an image or element should be shown. The drop-shadow filter allows us to create a drop-shadow on the clipped element by applying it to the parent of that element:
HTML
CSS
Output:
We’ve clipped 50% of the image with a circular path. Therefore, the drop-shadow filter is applied to only the visible part of the image. Isn’t it awesome?
Limitations and Differences
As we discussed above, drop-shadow doesn’t support the spread parameter. This means that creating an outline effect wouldn’t be possible using the drop-shadow( ) function because it gets killed everywhere. Also, it renders different shadow effects from the box-shadow and text-shadow (with the same parameters). You may feel that the differences between the box-shadow and drop-shadow boil down to the CSS Box Model. One follows it while the other doesn’t. Here’s an example:
HTML
Basic CSS
Applying shadow-effects
Output:
You can see that the box-shadow gives a heavier, darker shadow than the text-shadow and drop-shadow. Also, there’s a slight difference in the shadow’s positioning between the text-shadow and drop-shadow. Nevertheless, you may prefer different shadow effects according to your requirements.
Browser Support
The drop-shadow( ) function is supported in all modern browsers except older browsers like Internet Explorer. Though it isn’t something that would seriously hamper the UX, you can add a feature query with a box-shadow fallback.
Experiment With Different Shadow Effects
The popularity of box-shadow is quite obvious because of the multitude of use cases. However, the drop-shadow( ) function is highly under-utilized. We hope that you’ll experiment with different shadow effects and try to implement drop-shadow in your future projects.
Pseudo-classes add an entirely new range of functionality to CSS and your personal web development repertoire. Learn more about them to become a more proficient and efficient web developer.
