How to Create CSS Gradient Shadows

Modern websites use contrasting colors, typography, and shadows to create a user-friendly experience. A key trend is mimicking natural elements for a more organic look that uses shadows, depth, and movement.

CSS shadows are essential for adding depth to UI elements, and using gradient shadows takes this natural effect even further. Gradient shadows create smoother, more natural transitions of light and shadow, enhancing the overall design.

In this blog, we’ll explore how to create gradient shadows to elevate your web content and improve your UI’s visual appeal.

What Is Gradient Shadow in CSS?

The gradient shadow in CSS creates a more natural look with varying intensities, whereas, in solid shadows, the shadow’s intensity is uniform throughout, which can sometimes look flat and less realistic.

Example of gradient shadow

Usually, we have solid shadows, but sometimes we need colorful gradient shadows.

Gradient shadows, like the one you see in the above example, can create a sense of depth and dimension by using different shades and colors in the gradient.

For more information on creating shadows, refer to our blog on CSS box shadows.

There are many ways to create gradient shadows. Let’s look into each of them in detail.

Gradient Shadows Using linear-gradient()

When you think about creating gradient shadows, the linear-gradient() property might be the first option that comes to mind, and it’s the easiest way to achieve them. All you have to do is create a background using the linear-gradient() property and then add some blur effects to the element.

Syntax:

• direction: This value defines the direction of the gradient. It accepts values in degrees or using keywords like to right, to left, to bottom left, etc.
• color-stop1, color-stop2: These are the colors at specific points in the gradient. You can specify the position of each color stop as a percentage or length.

CSS:

See the Pen
Lambdatest info card with shadows by adarsh (@adarsh-gupta101)
on CodePen.

Here, in the example, the linear-gradient() property is used to create a gradient shadow effect. If we were to apply the linear-gradient() directly to the background of the element, it would change the entire background to a gradient color. However, the goal here is to create a gradient shadow while keeping the element’s background intact.

To achieve the background shadow, we have used the ::before pseudo selector. This pseudo-element allows us to insert content before the actual content of the element, in this case, a gradient shadow layer.

CSS:

In the code, we also applied a blur effect so that the linear-gradient will have softer shadow edges. The ::before pseudo-element is positioned absolutely within the .box element so that it will align with the dimensions of the .box element.

Here, we have also added a small CSS inset property to the element so the .box element does not entirely cover the shadow. To make the shadow appear below the element, we use the translate3d property and set the z-value as negative.

Gradient Shadows Using conic-gradient()

Just like the linear-gradient() function in CSS, the conic-gradient() function is another gradient function that creates gradients around the center of an element and can also be used for gradient shadow effects.

Example of conic-gradient() function

Syntax:

• from angle: The from angle defines the starting angle of the gradient.
• at position: The at position defines the center position of the gradient.
• color-stop: The color-stop defines the colors and their positions in the gradient.

The conic-gradient() function is capable of creating a wide variety of conical gradients. For instance, take a look at the following example.

CSS:

Output:

Example of a conic-gradient() function

You can create accurate color steps using the conic-gradient() function, allowing for precise control over the gradient transitions.

Let’s now soften this gradient shadow by adding blur to it. We will use a similar approach as we did with the linear-gradient() function, using the ::before pseudo-element selector.

CSS:

See the Pen
Gradient Shadow using Conical Gradient Property by adarsh (@adarsh-gupta101)
on CodePen.

Here, the conic-gradient() function is applied to the ::before pseudo-element of the button, creating a gradient shadow effect. Here, we have also used the translate3d property to stack the shadow behind the button.

In the example, we have used various color stops to create a gradient that transitions from a set of colors. Along with that, the blur property is used to soften the edges of the gradient.

Gradient Shadows Using filter()

CSS filter() is a property that can modify the appearance of an element by applying effects like blur, brightness, contrast, and more. The filter() property can be used to create gradient shadows and can be combined with other properties to enhance shadow effects.

To create gradient shadow effects, you can use the drop-shadow filter combined with the blur() property. Let’s see an example:

CSS:

See the Pen
Gradient shadow with drop shadow by adarsh (@adarsh-gupta101)
on CodePen.

In the example, the element is given a drop-shadow() function with two different colors. Their combination creates a gradient effect. Along with the blur() property, it makes the shadow spread evenly and gives it smoothness around the edges.

Here, we have multiple drop-shadow filters, and each drop-shadow() function will define a separate shadow layer, which can give a sense of gradient shadow.

Gradient Shadows Using radial-gradient()

The CSS radial-gradient() function allows you to create smooth transitions between two or more specified colors. A radial gradient radiates from a central point outwards in a circular or elliptical shape.

Syntax:

• shape: It specifies the shape of the gradient (e.g., circle or ellipse).
• size: It specifies the size of the gradient (e.g., closest-side, farthest-corner).
• position: It specifies the position of the gradient (e.g., center, top left).
• start color: It specifies the start color is the color at the starting point of the gradient.
• last color: It specifies the last color is the color at the ending point of the gradient.

The idea behind using the radial-gradient() function is similar to how the linear-gradient() function is used for shadows. The pseudo-selector ::before is used and styled with a background of radial-gradient to create the shadow-like effect.

CSS:

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

In the above example, there are five different buttons, each with a different shadow effect created using the radial-gradient() function. The spotlight button uses the radial-gradient() function, and its width and height are double the element’s width to create a spotlight effect when hovered over.

The soft-shadow button uses the radial-gradient() function for a subtle shadow effect, and the ::before pseudo-element is used here to target the shadow.

The neon-button has a neon light effect with both text-shadow and box-shadow when hovered over. You can also add more custom styles to improve and customize the shadow effects.

Gradient Shadows Using clip-path()

The CSS clip-path() property allows you to define a clipping region for an element. A clipping region is essentially a shape that defines what parts of an element should be visible and what parts should be hidden.

By using a polygon-based clipping region, we can create complex shapes that allow us to create gradient-based shadows.

Let’s take a look at an example of how to use the clip-path() property to create a gradient shadow. In this example, we’ll use a polygon-based clipping region to create a rectangular shape that allows us to create a gradient shadow.

CSS:

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Here in the code, the background-image() property is used to define the gradient along with the blur() property for smoothness. Following the same approach used in the earlier examples, the ::before pseudo-selector is used for styling the shadow.

Element with transparent background

If the background of the element is transparent, you will see the entire gradient on the screen, just like in the above image. To avoid this, we use the clip-path() property here so that we get the desired shadow.

If the element has a non-transparent background color, it’s unnecessary to use a clip-path() property, as the background of the element will naturally cover the gradient portion that isn’t needed. The clip-path() property can assure you that whether the background is transparent or not, it will accurately define the visible area of the element.

Now that we know almost all the basics of CSS gradient shadows, let’s add some animation to it.

Gradient Shadows Using Animation

So far, we have seen the best possible ways to create gradient shadows. To add more interactivity, you can add CSS animations to these shadows.

In the following example, there are two card elements that have an animated gradient shadow when you hover over the card element.

CSS:

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Here, the ::before and ::after pseudo-elements are used to create a background shadow for the element. Along with that, the linear-gradient() function is used to create the gradient. The blur property makes the gradient smoother, giving it the appearance of a soft shadow.

For the animation part, the animation gradually changes the background position of the pseudo-elements background gradient from 0 0 to 300% 0 and then back to 0 0. This movement creates the illusion of a moving gradient, adding a dynamic effect to the border, which can catch the user’s attention.

Best Practices for Creating Gradient Shadows

Gradient shadows add depth and dimension to elements, but it is important to keep them subtle. Gradients should be used sparingly to avoid overly complicated web designs.

Here are some best practices to keep in mind while creating gradient shadows

• Blend Colors Smoothly: Choose colors that complement each other. Adding too many contrasting colors in your shadows can make them look distracting and may draw users’ attention away from the original content.

CSS allows you to layer box shadows, through which you can define specific color stops in your gradient. This allows for more precise control over the color transition.

• Use Layering: While it is true that layered shadows can improve the appearance of shadows, they do come at a cost. For example, if you try to layer 20 shadows, the browser and device have to do 20 times more work than with a single layer.

If your user is using an old device with slow rendering, it can affect the user experience of such users. Excessive use of gradients and filters can impact performance on lower-end devices.

You should test the performance in order to ensure that you can give the best experience for all your users.

• Provide Fallback for Older Browsers: Old browsers sometimes do not support all CSS properties. To ensure it doesn’t affect the user experience, provide fallback styles for these browsers.

For example, the clip-path() property is not fully supported by the major browsers, and they all have partial support. It’s important to check browser compatibility for CSS properties and use fallbacks or vendor prefixes as needed.

To ensure that your website performs as intended across all browsers, consider AI-powered testing platforms like LambdaTest that offer cross browser testing to check how your CSS properties render on older browser versions. You can easily verify the support for properties like clip-path() across different browser environments and ensure smooth fallback implementations.

In addition to browser compatibility testing, you can even use LT Browser to test sites on mobile across 50+ screen sizes. This ensures that your gradient shadows are responsive and adapt to different mobile devices.

Wrapping Up

In this detailed blog, we discussed various solutions for creating gradient shadows. While there isn’t a straightforward way to achieve the gradient shadow effect, we’ve discovered more than five methods to create stunning gradient shadows.

We’ve also looked at some real-world examples and best practices to help you get the most out of this design element. If you take the next step and dig deeper, you might discover even more interesting ways to create gradient shadows. I’ll leave that exploration to you.