The following CSS functions have no specific category, so we grouped them here in a miscellaneous section.
Let's see what we have.
The
drop-shadow() CSS function works with the filter property adds a shadow under the element, and it looks like this:
drop-shadow(5px 5px 3px rgba(0, 0, 0, .5));
The drop-shadow() function works almost exactly the same way as the box-shadow property with two differences: the drop-shadow() function doesn't support the spread-radius or the inset values.
Please refer to the box-shadow property for a detailed description of all the values. Additionally, some browsers actually provide hardware acceleration when using this function, which eventually improves performance. You know how it goes; anything we can do to improve performance is always a +1.
CSS:
.element {
filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, .5));
}