CSS drop-shadow() Function
filter: drop-shadow(10px 10px 10px red);
The drop-shadow() css function defines a drop shadow effect to the image.
This filter is similar to the box-shadow property.
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.
drop-shadow(offset-x offset-y blur-radius spread color)
The numbers in the table specify the first browser version that fully supports the property.
The following table describes the arguments of this function.
|Required. Specifies a pixel value for the offset-x shadow. Negative values place the shadow to the left of the image.
|Required. Specifies a pixel value for the offset-y shadow. Negative values place the shadow above the image.
|Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow's edge is sharp).
|Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
|Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).