How to Create a Gradient Shadow using CSS ?

Last Updated : 16 Oct, 2024

A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-elements.

Create a Gradient Shadow in CSS

Here are the steps required to get the desired linear-gradient shadow:

Create an HTML element (button, card, etc.) for the shadow effect.
Use a pseudo-class ::before or ::after in CSS with absolute positioning relative to the parent element.
Apply small insets (top, right, bottom, left) to adjust the shadow's position.
Set a linear-gradient as the background for the pseudo-class, specifying the colors and direction.
Use the filter: blur() property to soften the shadow, simulating a realistic effect.
Add a z-index to ensure the shadow appears beneath the parent element.

Example 1: Linear-gradient Shadow on a Rectangle

Here we creates a rectangular element with a linear-gradient shadow effect using a pseudo-element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Linear-gradient Shadow on a Rectangle</title>
    <style>
        * {
            margin: auto;
        }

        .lgShadow {
            background: rgb(74, 201, 0);
            padding: 1rem;
            top: 100px;
            position: relative;
            height: 100px;
            width: 200px;
        }

        /* pseudo-class for making gradient shadow. */

        .lgShadow::after {
            content: "";
            position: absolute;
            inset: -.625em;
            background: linear-gradient(to bottom right,
                    rgb(0, 255, 81), rgb(255, 213, 0));
            filter: blur(2.5em);
            z-index: -1;
        }
    </style>
</head>

<body>
    <p class="lgShadow">
        GeeksforGeeks is a portal for Geeks.
    </p>
</body>

</html>

Output:

Linear-gradient-Shadow-on-a-Rectangle — Linear-gradient Shadow on a Rectangle

Example 2: Circular Gradient Shadow

Here we displays a circular element with a gradient shadow effect, enhancing the appearance of the text "GeeksforGeeks" while maintaining a visually appealing design.