Hi all! Today I was scrolling through the news feed, and I realized that a fairly large number of requests are devoted to the topic: “How to create a gradient shadow using CSS?”. It became interesting to deal with this issue on my own 🙂

As an experiment, we will make a gradient shadow using CSS for two colors: red and blue.

.box {
box-shadow: 0 0 10px 5px rgba(128,0,128,0.5), 
0 0 20px 10px rgba(255,0,0,0.5);
}

In this example, we’re using two shadows, one with a purple start color (rgba(128,0,128,0.5)), and one with a red end color (rgba(255,0,0,0.5)). The first shadow has a larger radius (20px) than the second shadow (10px) – this creates the illusion of a gradient.

An example of creating a gradient shadow with CSS is available here. And yes – as always, if you have any questions, write to the mail or Telegram.