drop-shadow() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The drop-shadow() CSS function applies a shadow effect to the rendered image of an element, similar to a real-world shadow cast by a light source. Unlike the filter() property’s blur() or brightness() functions, which modify the visual output of an element globally, drop-shadow() only affects the visible pixels of the element and ignores transparent areas. This makes it particularly useful for images with transparency, icons, or elements with non-rectangular shapes, such as img elements or elements with clip-path applied.

The function allows you to specify the horizontal offset, vertical offset, blur radius, and color of the shadow. Positive horizontal offsets move the shadow to the right, while negative values move it to the left. Positive vertical offsets move it downward, and negative values move it upward. The blur radius controls the softness of the shadow edges, and the color determines its visual tone. If the blur radius is omitted, the shadow is sharp by default, and if the color is omitted, it defaults to the current text color or element color.

A practical example of drop-shadow() is applying it to an icon with transparency to create a subtle lift effect:

.icon {
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}

Here, the shadow is offset 3px both horizontally and vertically, blurred by 5px, and has a semi-transparent black color. Unlike the box-shadow property, which only works with the element’s rectangular box, drop-shadow() respects the alpha transparency of the element, producing a more natural effect for irregular shapes.

Additionally, multiple shadows can be applied by separating each drop-shadow() with a space, similar to how background layers can stack. This allows complex shadow effects without additional markup.

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

HTML

<body>



  <div class="container">

    <div class="shadow-box">

      <p>CSS Drop Shadow</p>

    </div>

  </div>



</body>

CSS

/* Container for alignment */

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background-color: #f0f0f0;

}



/* The element receiving the shadow */

.shadow-box {

  padding: 2rem;

  background-color: white;

  border-radius: 15px;

  font-family: sans-serif;

  font-weight: bold;

  

  /* The drop-shadow function */

  /* Parameters: X-offset, Y-offset, Blur, Color */

  filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.3));

  

  /* Comparison note: 

     Unlike box-shadow, if this element had a 

     transparent background, the shadow would 

     appear directly under the text! */

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS drop-shadow() function. Hover over a browser icon to see the version that first introduced support for this CSS function.