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.
The drop-shadow()
CSS function applies a drop shadow effect to the input image. Its result is a <filter-function>
.
Try it
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 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.
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(#e23 0.5rem 0.5rem 1rem)
The drop-shadow()
function accepts a parameter of type <shadow>
(defined in the box-shadow
property), with the exception that the inset
keyword and spread
parameters are not allowed.
Parameters
<color>
Optional-
Specifies the color for the shadow. If not specified, the value of the
color
property 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 of0
is 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 the Gaussian blur function. A larger<standard-deviation>
value creates a larger and more blurred shadow. Negative values for<standard-deviation>
are not allowed.
Formal syntax
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 {
display: inline-block;
margin: 0 0.5rem 2rem 1rem;
padding: 0.5rem;
height: 100px;
width: 190px;
vertical-align: top;
background-color: #222;
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);
}
In the absence of a <color>
value in the drop-shadow()
function in the first box, the shadow uses the value of the color
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 shifts shadow to the left and top.
Specifications
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-drop-shadow |
Browser compatibility
BCD tables only load in the browser
See also
The other <filter-function>
functions available to be used in values of the filter
and backdrop-filter
properties include:
blur()
brightness()
contrast()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
box-shadow
propertytext-shadow
property