CSS drop-shadow() Function

Example

img {
  width: 300px;
  filter: drop-shadow(10px 10px 10px red);
}

Meaning

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.

Version: CSS3

Standard Syntax

drop-shadow(offset-x offset-y blur-radius spread color)

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.

Argument	Description
offset-x	Required. Specifies a pixel value for the offset-x shadow. Negative values place the shadow to the left of the image.
offset-y	Required. Specifies a pixel value for the offset-y shadow. Negative values place the shadow above the image.
blur-radius	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).
spread	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).
color	Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).