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)
Post a Comment