CSS drop-shadow() Function
drop-shadow() function to apply a drop shadow effect to an image.
drop-shadow() function is used with the
filter property to add a drop shadow effect to an image.
A drop shadow is a (typically) blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image.
drop-shadow() function accepts multiple arguments that determine the drop shadow's offset, its blur, and its color.
Here's an example of a basic drop shadow:
Your drop shadows don't necessarily always need to have an offset. For example, you could use the
drop-shadow() function to create a glow around the image.
To do this, just set the offset arguments to
0. Like this:
Most drop shadows tend to have blurred edges, but there's nothing stopping you from having sharp edges. To do this, just set the blur argument to
The official syntax of the
drop-shadow() function is as follows:
The arguments specify the horizontal and vertical offset of the drop shadow, the amount of blur, and its color.
Here's an explanation each value:
- <color>? (optional)
This value determines the color of the drop shadow. It can be any valid
<color>value. For example,
rgba(0,0,0,0.3)are all valid colors. If this value isn't provided, the value will be taken from the
This can be either two values or three, as indicated below:
- <horizontal-offset> (required)
Determines the horizontal offset of the drop shadow. It is a length value. For example,
1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn to the left of the box. If it is a positive value, it will be drawn to the right.
- <vertical-offset> (required)
Determines the vertical offset of the drop shadow. It is a length value. For example,
1em. Negative values are allowed. If a negative value is provided, the offset will result in the drop shadow being drawn above the box. If it is a positive value, it will be drawn below.
- <blur> (optional)
Determines the Gaussian blur effect (if any). If the value is zero (i.e.
0), the edge of the shadow will be sharp. The higher the value, the more blurred the shadow will become. Negative values are not allowed for a Gaussian blur.
The following table provided by Caniuse.com shows the level of browser support for this feature.