CSS dropshadow() Function (original) (raw)

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 `

CSS drop-shadow() Function

<style>
    h1 {
        color: green;
    }

    body {
        text-align: center;
    }

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

GeeksforGeeks

<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">

**Output:

Example 2: Negative Offsets

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

html `

CSS drop-shadow() Function

<style>
    h1 {
        color: green;
    }

    body {
        text-align: center;
    }

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

GeeksforGeeks

<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">

**Output:

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