CSS drop-shadow() Function

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

Syntax:

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 it to the right; negative 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`.

Below examples illustrate the drop-shadow() function in CSS:

Example : In this example we demonstrates the use of the CSS drop-shadow() function to apply a yellow shadow with a 10px offset, blur radius, and spread radius to the w3wiki logo 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>w3wiki</h1>

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

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

</html>

Output:

Example : In this example the CSS drop-shadow() function applied to the w3wiki logo image with a yellow shadow offset by -10px horizontally and vertically, a blur radius of 20px.

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 20px yellow)
        }
    </style>
</head>

<body>
    <h1>w3wiki</h1>

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

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

</html>

Output:

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

Contact Us