CSS Function - drop-shadow()

Quiz

CSS drop-shadow() function applies a shadow effect to an element. It is used with the CSS filter property and is similar to box-shadow property, but drop-shadow() applies shadows to non-rectangular shapes, considering transparency.

Syntax

The syntax for the CSS drop-shadow() function is as follows:

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

Parameters

CSS drop-shadow() function accepts the following parameters:

Parameters	Description
offset-x	It is a required parameter. It specifies the offset of horizontal shadow. The positive value sets the horizontal shadow in positive x (right side) and negative value in negative x (left side) direction.
offset-y	It is a required parameter. It specifies the offset of vertical shadow. The positive value sets the vertical shadow in the positive y (upward) and the negative value in the negative y (downward) direction.
blur-radius	It is an optional parameter. It sets the blur radius of the shadow.
spread-radius	It is an optional parameter. It sets the spread radius of the shadow.
color	It is an optional parameter. It sets the color of the shadow.

Examples of CSS drop-shadow() Function

The following examples illustrate the use of the CSS drop-shadow() function on images and text in various conditions.

Adding Drop Shadow to an Image

In this example, we have created a drop shadow of the image using only horizontal and vertical offset.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS drop-shadow() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: drop-shadow(15px 15px);
        }
    </style>
</head>
<body>
    <h2>CSS drop-shadow() Function</h2>
    <div class="container">
        <img class="img1" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
</body>
</html>

Applying a Blur Effect to the Drop Shadow

In this example, we have used the blur-radius parameter to add a blur effect to the shadow of the image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS drop-shadow() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: drop-shadow(10px 10px 2px rgba(210, 105, 30, 0.4));
        }
    </style>
</head>
<body>
    <h2>CSS drop-shadow() Function</h2>
    <div class="container">
        <img class="img1" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
</body>
</html>

Applying Drop Shadow on Text

In this example, we have used the drop-shadow() function to add a shadow on the text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS drop-shadow() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        p {
            font-size: 25px;
            filter: drop-shadow(5px 5px 1px #04af2f);
        }
    </style>
</head>
<body>
    <h2>CSS drop-shadow() Function</h2>
    <div class="container">
        <p>This is just a paragraph with a shadow.</p>
    </div>
</body>
</html>

Applying a Reverse Drop Shadow on Images

In this example, we have used the negative values of horizontal and vertical offset to create a reverse drop shadow of the image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS drop-shadow() Function</title>
    <style>
        .container {
            width: 400px;
            border: 2px solid #04af2f;
            padding: 20px;
            margin: 10px;
            display: inline-block;
        }
        .img1 {
            filter: drop-shadow(-10px -10px 2px rgba(210, 105, 30, 0.4));
        }
    </style>
</head>
<body>
    <h2>CSS drop-shadow() Function</h2>
    <div class="container">
        <img class="img1" src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
    </div>
</body>
</html>

Applying Drop Shadow on Hover

In this example, the drop-shadow() effect is applied when hovering over an image.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS drop-shadow() Function</title>
    <style>
        img:hover {
            filter: drop-shadow(10px 10px 2px rgba(210, 105, 30, 0.4));
        }
    </style>
</head>
<body>
    <h2>CSS drop-shadow() Function</h2>
    <p>
        <strong>Hover over this image to add a shadow effect.</strong>
    </p>
    <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fhtml%2Fimages%2Ftest.png" alt="logo">
</body>
</html>

Supported Browsers

Function
drop-shadow()	18	12	35	6	15

Print Page