How to create gradient shadow in CSS

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!