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

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.

HTML

<!DOCTYPE html> <html>  <head>     <title>Circular Gradient Shadow</title>     <style>         * {             margin: auto;         }          .lgShadow {             background: rgb(201, 77, 0);             padding: 3rem;             top: 100px;             position: relative;             height: 100px;             width: 200px;             border-radius: 50%;         }          /* pseudo-class for making gradient shadow. */          .lgShadow::after {             content: "";             position: absolute;             inset: -.625em;             background: linear-gradient(to bottom right,                     rgb(255, 0, 0), rgb(255, 213, 0));             filter: blur(2.5em);             border-radius: 50%;             z-index: -1;         }     </style> </head>  <body>     <p class="lgShadow">         GeeksforGeeks is a portal for Geeks.     </p> </body>  </html>