drop-shadow()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
Thedrop-shadow()CSSfunction applies a drop shadow effect to the input image. Its result is a<filter-function>.
Try it
filter: drop-shadow(30px 10px 4px #4444dd);filter: drop-shadow(0 -6mm 4mm rgb(160 0 210));filter: drop-shadow(0 0 0.75rem crimson);<section> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>A drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image.
Note:This function is somewhat similar to thebox-shadow property. Thebox-shadow property creates a rectangular shadow behind an element'sentire box, while thedrop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of theimage itself.
Syntax
/* Two length values *//* drop-shadow( <length> <length> ) */drop-shadow(5px 5px)/* Three length values *//* drop-shadow( <length> <length> <length> ) */drop-shadow(5px 5px 15px)/* Two length values and a color *//* drop-shadow( <length> <length> <color> ) */drop-shadow(5px 5px red)/* Three length values and a color *//* drop-shadow( <length> <length> <length> <color> ) */drop-shadow(5px 5px 15px red)/* The order of color and length values can be changed *//* drop-shadow( <color> <length> <length> <length> ) */drop-shadow(#ee2233 0.5rem 0.5rem 1rem)/* Pass multiple drop-shadows to a filter to stack them */drop-shadow(10px 10px red) drop-shadow(-5px -5px yellow)Thedrop-shadow() function accepts a parameter of type<shadow> (defined in thebox-shadow property), with the exception that theinset keyword andspread parameters are not allowed.
Parameters
<color>OptionalSpecifies the color for the shadow. If not specified, the value of the
colorproperty defined in the parent element is used.<length>Specifies the offset length of the shadow. This parameter accepts two or three values. If two values are specified, they are interpreted as
<offset-x>(horizontal offset) and<offset-y>(vertical offset) values. Negative<offset-x>value places the shadow to the left of the element. Negative<offset-y>value places the shadow above the element. If not specified, the value of0is used for the missing length. If a third value is specified, it is interpreted as<standard-deviation>, which is the value of the standard deviation to theGaussian blur function. A larger<standard-deviation>value creates a larger and more blurred shadow. Negative values for<standard-deviation>are not allowed.
Formal syntax
<drop-shadow()> =
drop-shadow([<color>?&&<length>{2,3}])
Examples
Setting a drop shadow
<div>drop-shadow(16px 16px)</div><div>drop-shadow(16px 16px red)</div><div>drop-shadow(red 1rem 1rem 10px)</div><div>drop-shadow(-16px -16px red)</div><div> drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red) drop-shadow(-1px -1px red)</div>div { display: inline-block; margin: 0 0.5rem 2rem 1rem; padding: 0.5rem; height: 100px; width: 190px; vertical-align: top; background-color: #222222; color: lime;}div:nth-child(1) { filter: drop-shadow(16px 16px);}div:nth-child(2) { filter: drop-shadow(16px 16px red);}div:nth-child(3) { filter: drop-shadow(red 1rem 1rem 10px);}div:nth-child(4) { filter: drop-shadow(-16px -16px red);}div:nth-child(5) { filter: drop-shadow(1px 1px red) drop-shadow(1px -1px red) drop-shadow(-1px 1px red) drop-shadow(-1px -1px red);}In the absence of a<color> value in thedrop-shadow() function in the first box, the shadow uses the value of thecolor property from the element (lime). The second and third shadows illustrate that the length and color values can be specified in any order. The third shadow shows the blurring effect when a third<length> value is specified. The fourth shadow uses negative offsets, which shift the shadow to the left and top. The fifth example shows how to use multiple drop-shadows on a single element.
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Browser compatibility
Loading…