VOOZH about

URL: https://www.geeksforgeeks.org/css/css-drop-shadow-function/

⇱ CSS drop-shadow() Function - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS drop-shadow() Function

Last Updated : 12 Jul, 2025

The CSS drop-shadow() function adds a shadow effect to elements, like images, using horizontal and vertical offsets, blur radius, spread radius, and color parameters. It enhances visual depth and prominence in web design.

Syntax:

filter: drop-shadow(offset-x offset-y blur-radius spread-radius color);

Parameters: This function accepts five parameters as mentioned above and described below:

ParameterDescription
offset-xSets the horizontal offset of the shadow. Positive values move to the right; negative values move to the left.
offset-ySets the vertical offset of the shadow. Positive values move it down; negative move it up.
blur-radiusOptional parameter. Sets the blur radius of the shadow, creating a softer edge.
spread-radiusOptional parameter. Sets the spread radius of the shadow, expanding or contracting its size.
colorOptional parameter. Sets the color of the shadow. Default is black.

Examples of drop-shadow() Function in CSS

Example 1: Basic Usage

This example demonstrates the use of the drop-shadow() function to apply a yellow shadow with a 10px offset, blur radius, and spread radius to an image.

Output:👁 Image

Example 2: Negative Offsets

This example applies the  drop-shadow() function with negative offsets and a larger blur radius.

Output:👁 Image

Supported Browsers: The browsers supported by drop-shadow() function are listed below:

Comment
Article Tags: