In this article, we will see how to create a gradient shadow using CSS, along with knowing the various CSS properties applied to get the gradient shadow effects.
The gradient shadow means adding the gradient with shadow effect to the element. The gradient can be linear, radial, or cylindrical. Generally, the gradient shadow can be implemented on the cards, buttons, banners, etc, to highlight it with a fake background outline, along with highlighting the content. Adding the gradient shadow can be achieved using CSS pseudo-classes, and linear-gradient shadows.
Syntax:
element::after {
/* desired styling properties */
}Approach: Here are the steps required to get the desired linear-gradient shadow:
- Make an HTML file, with the button, card, banner or the thing that you want to make shadow of.
- Make a pseudo class in stylesheet and make the position absolute of the pseudo class relative to the parent element.
- Add little inset, which is shorthand of top, right, bottom, left, in order to make the shadow shift from getting hidden by the parent element.
- To the pseudo class, add the linear-gradient of the desired color, with the desired direction to the background property.
- Add the filter blur property to pseudo class to make it look like a shadow of the parent element, otherwise it will look like a border.
- At last, add the z-index to make to go beyond the parent element.
Example 1: This example describes the creation of a Linear-gradient shadow using CSS.
<!DOCTYPE html> <html>
<head>
<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
Example 2: This example describes the Linear-gradient shadow in a circular shape using CSS.
<!DOCTYPE html> <html>
<head>
<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>
|
Output:
Circular linear-gradient shadow