CSS Attributes Index   CSS Filters

---

Applies a drop shadow effect to an input image.

{ filter: drop-shadow(length(2,3) [blur color]) }

Parameter	Description	Value
h-offset	Required. The horizontal offset of the shadow. A positive value casts the shadow on the right side of the box, a negative value casts the shadow on the left side of the box.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
v-offset	Required. The vertical offset of the shadow. A positive value casts the shadow below the box, a negative value casts the shadow above the box.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be.	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
color	Optional. The color of the shadow. If not set, the default value is the current text color for the page.	String that specifies one of the color names or red-green-blue ( RGB ) values in the Color Table.*

NOTE: Specifying the color as a color name may not be recognized by some browsers, whereas the RGB color value should always be displayed accurately.

The property is read/write with a default value of none.

The drop-shadow( ) CSS function applies an offset version of a visual object’s alpha mask drawn in a particular color, composited below or above the image.

A drop-shadow declaration requires X and Y offsets relative to the element, and optional blur and color attributes.

If a border-radius is specified on the element with a drop-shadow, the drop-shadow takes on the same rounded corners.

Values are interpreted as for the box-shadow CSS attribute, without the spread attribute.

(2,3) in the syntax indicates that two up to three different length values may be specified.

If only two values are set, they are interpreted as offset-x and offset-y values, respectively. Negative offset-x value places the shadow to the left of the element. Negative offset-y value places the shadow above the element.

filter:drop-shadow(8px 8px lightgray)	filter:drop-shadow(-8px 8px lightgray)
filter:drop-shadow(8px -8px lightgray)	filter:drop-shadow(-8px -8px lightgray)

If a third value is given, it is interpreted as a blur attribute. Negative blur values are not allowed and invalidates the entire drop-shadow declaration.

filter:drop-shadow(8px 8px 12px darkolivegreen)	filter:drop-shadow(8px 8px -12px darkolivegreen)

Drop-shadow with border-radius specified on the element.

border-radius: 10%; filter:drop-shadow(9px 9px 6px gray)

box-shadow   text-shadow