box-shadow vs drop-shadow() in CSS

by keshav

---

---

In this article, we will see the difference between the box-shadow and drop-shadow(). The box-shadow is a CSS property but drop-shadow() is a function. Both box-shadow and drop-shadow() are used to cast a shadow. The difference between them is, the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

In simple words, while working with the transparent images if you use the drop-shadow() filter function it will create a shadow on the image's content and if you use the box-shadow property it will create a rectangular shadow behind an element's entire box.

In case of text content, drop-shadow() works similar to the text-shadow property.

Their syntax is,

filter: drop-shadow(offset-x offset-y blur-radius color);

box-shadow: offset-x offset-y blur-radius color ;

Demo Code is,

See the Pen
box-shadow-vs-drop-shadow by Vidyasheela (@_vidyasheela)
on CodePen.

Also Read:

• How to make Sticky Nav Bar Using HTML and CSS?
• How To Make Show Password Button Using Javascript
• How to make a simple HTML Color Code Picker

---