In this article, I will show you an easy way to create a gradient shadow in CSS.
Inside the HTML file first, create a div:
<div class="shadow">
<div class="circle">
</div>
Now it's time to give style it,
.shadow {
filter: blur(100px);
}
You can adjust the blur to your liking.
Creating the shadow,
.circle {
background: radial-gradient(
at right bottom,
rgb(209, 213, 219),
rgb(192, 38, 211),
rgb(234, 88, 12)
); /* YOU CAN CHANGE GRADIENT */
width: 200px;
height: 200px;
}
This will create the gradient shadow with only CSS:
If you'd like to see another example, check out this CodePen:
Thanks for reading
Follow me on Twitter
Thanks for reading!
ย