CSS drop-shadow() function

Definition and usage

CSS's drop-shadow() Filter functions apply shadow effects to images.

Add different shadow effects to the image:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Add different shadow effects to the image (using negative values for horizontal and vertical shadows):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Value	Description
h-shadow	Required. Specify the pixel value of the horizontal shadow. Negative values will place the shadow to the left of the image.
v-shadow	Required. Specify the pixel value of the vertical shadow. Negative values will place the shadow above the image.
blur	Optional. Add a blur effect to the shadow, in pixels. The larger the value, the stronger the blur effect (the shadow will become larger and lighter). Negative values are not allowed. If the value is not specified, it defaults to 0 (the shadow edge is clear).
spread	Optional. Must be a pixel value. Positive values will expand and enlarge the shadow, while negative values will shrink it. If not specified, it defaults to 0 (the shadow is the same size as the element).
color	Optional. Add color to the shadow. If not specified, the color depends on the browser (usually black).