drop-shadow() CSS Function

Description

The CSS drop-shadow() function applies a drop shadow effect to an image. It accepts five parameters:

  • offset-x: The horizontal offset of the shadow, in pixels.
  • offset-y: The vertical offset of the shadow, in pixels.
  • blur-radius: The amount of blur applied to the shadow, in pixels.
  • spread-radius: The amount of spread applied to the shadow, in pixels. This parameter is optional.
  • color: The color of the shadow. This parameter is also optional, and will default to the element's current color.

The drop-shadow() function can be used to create a variety of effects, such as giving an image a more realistic appearance, making an element stand out from the page, or creating a sense of depth.

Here is an example of how to use the drop-shadow() function:

img {
  filter: drop-shadow(5px 5px 5px black);
}

This code will give all images on the page a drop shadow with a horizontal offset of 5 pixels, a vertical offset of 5 pixels, a blur radius of 5 pixels, and a color of black.

You can also use the drop-shadow() function to create more complex effects. For example, the following code will create a drop shadow with a gradient color:

img {
  filter: drop-shadow(5px 5px 5px linear-gradient(to right, black, white));
}

This code will create a drop shadow that fades from black to white from left to right.

The drop-shadow() function is a powerful function for adding visual interest to your web pages. By experimenting with different values, you can create a variety of unique and eye-catching effects.

Syntax

drop-shadow() = drop-shadow(offset-x offset-y blur color)

Values

  • offset-xThe horizontal offset of the shadow relative to the picture. A positive value of this parameter sets the shadow to the right, negative - to the left. Required.
  • offset-yThe vertical offset of the shadow relative to the picture. A positive value sets the shadow to shift down, a negative value - up. Required.
  • blurSets the blur radius of the shadow. The larger this value, the stronger the shadow is smoothed, becomes wider and brighter. If this parameter is not set, it is set to 0 by default, and the shadow will be clear and not blurry.
  • spread-radiusThe spread radius of the drop shadow. This is optional.
  • colorThe shadow color in any CSS format available, by default the shadow is black. Optional parameter.

Example

<img class="drop-shadow" src="images/nature.jpg" alt="Drop Shadow Example">
.drop-shadow {
filter: drop-shadow(0 0 10px red);
}

Browser Support

The following table will show you the current browser support for the CSS drop-shadow() function.

Desktop
Edge Chrome Firefox Opera Safari
125335409.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5335419.364.4

Last updated by CSSPortal on: 7th October 2023