CSS drop-shadow() Function

Last Updated : 30 Aug, 2024

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:

Parameter	Description
`offset-x`	Sets the horizontal offset of the shadow. Positive values move to the right; negative values move to the left.
`offset-y`	Sets the vertical offset of the shadow. Positive values move it down; negative move it up.
`blur-radius`	Optional parameter. Sets the blur radius of the shadow, creating a softer edge.
`spread-radius`	Optional parameter. Sets the spread radius of the shadow, expanding or contracting its size.
`color`	Optional 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.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS drop-shadow() Function</title>

    <style>
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }

        .drop_shadow_effect {
            filter: drop-shadow(10px 10px 10px yellow)
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS drop-shadow() function</h2>

    <img class="drop_shadow_effect"
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo">
</body>

</html>

Output:

Example 2: Negative Offsets

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

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS drop-shadow() Function</title>

    <style>
        h1 {
            color: green;
        }

        body {
            text-align: center;
        }

        .drop_shadow_effect {
            filter: drop-shadow(10px 10px 10px yellow)
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS drop-shadow() function</h2>

    <img class="drop_shadow_effect"
        src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo">
</body>

</html>