Drop-shadow() - Function CSS

Syntax diagram of drop-shadow().

Description of the terms used in the diagram:

• color is the color of the shadow (optional value).
• length-x and length-y correspond to the shadow offset. These two values are mandatory. They are two numerical values followed by one of the CSS dimension units.
• length-b is the distance over which the shadow fades before disappearing (optional value). Numeric value followed by a unit of measure.

Description of the drop-shadow() function.

The function drop-shadow() defines the drop shadow of an element: its dimensions, color, and any blur.
The drop shadow gives a three-dimensional effect: the element appears to be lifted off the background of the page.

His role is therefore quite comparable to that of the property box-shadow. However, an important difference arises when this function or property is applied to an image with transparent parts. The function drop-shadow() draws the shadow following the non-transparent parts of the image, while the property box-shadow draws the shadow following the shape of the block.

Original image
The outline and the "3" are transparent

With the drop-shadow() function

With the box-shadow property

To be complete, here is now a comparison between the function drop-shadow() and the property text-shadow, both applied to an element containing text.

You can also refer to the page on box-shadow and the property text-shadow to shade the text itself.

The drop-shadow() value can be used with the following properties:

• backdrop-filter : Applies a graphical filter to the clip behind the targeted clip.
• filter : Applies a graphic filter (blur, contrast, brightness, etc.) to an element.

Syntaxes of the drop-shadow() function.

• filter: drop-shadow(silver 15px 15px 5px); c x y b

  This syntax is recognized by all browsers. The function expects 2 to 4 parameters, in the following order:

  • c and the color of the shadow, expressed in one of the syntaxes recognized by CSS. See Colors. The default value is currentColor.
  • x and y: two numerical values, positive or negative, along with their unit of measurement. See the CSS dimension units.
    These two values represent the horizontal and vertical offset of the shadow. If the values are negative, the shadow is displayed above and/or to the left of the element.
    Percentages are not accepted here.
  • b: a positive or zero numeric value, with a unit of measurement. b defines the blur value, where 0 indicates a perfectly sharp shadow. If b is not specified, the default value is 0.
    This value is different from the one used by box-shadow.

Simulator.

Triangle de Penrose
 

Browsers compatibility with drop-shadow() function.

The table below illustrates the compatibility of browsers with filters and graphic effects, and more specifically with the function drop-shadow(). It shows that this compatibility is now very good.

1

Graphic
filters

2

drop-shadow()
function

Estimated overall support.

96%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the drop-shadow() function.

• Filter Effects Module Level 1

  The Filter effects module describes the different graphic effects, including the drop-shadow() function.
  

  October 25, 2012

  Working Draft.

  

  

  

See also: other graphic effects and filters.

The graphic effects available in CSS are becoming more and more numerous. They are described in the specification of W3C Filter Effects Module.

Properties:

backdrop-filter

Applies a graphical filter to the clip behind the targeted clip.

color-interpolation

Defines the color space to use to calculate gradients, animations, and combinations with the alpha channel.

color-interpolation-filters

Defines in which color space the filter effects are calculated. Default is linearRGB.

filter

Applies a graphic filter (blur, contrast, brightness, etc.) to an element.

flood-color

Sets the color of fills and shading in the context of SVG filters.

flood-opacity

Sets the opacity of fills and shadings in the context of SVG filters.

lighting-color

Sets the color of the lighting in the context of an SVG filter.

Functions:

blur()

blur() is a graphical filter that can be used with the filter property. The function applies a blur effect to the clip.

brightness()

Adjusts the brightness of an element (graphic filter).

contrast()

Adjusts the contrast of an element (graphic filter).

grayscale()

Converts an element to grayscale (graphic filter) in a less complete way. In the extreme, colors can be completely removed.

hue-rotate()

Changes the colors of an image by rotating hues (graphic filter).

invert()

Inverts the colors of an element (graphic filter).

opacity()

Determines how transparent an element is (graphic filter).

saturate()

Sets the color saturation of an element (graphic filter).

sepia()

Applies a sepia effect to an element (graphics filter).