Multiple circle lines with gradient color CSS

Question

I want achieve design of banner with multiple circle lines with gradient background color. I've research more regarding this. I'm unable to find questions related my concern.

Bellow code is used to create solid color background banner.

.blue-cross-banner{
    background: #0FA2EB;
    border-radius: 30px;
    padding: 4em;
    margin: 1em;
}

I cannot upload svg format of banner. It shows the gradient shade color of circle lines. I found some what related to my question in here https://css-tricks.com/gradient-borders-in-css/. But it doesn't help to my concern.

#grad2 {
background: linear-gradient(90deg, rgba(15, 162, 235, 0) 33.16%, #0FA2EB 85.35%);
border-radius: 30px;
}

Above css is need to use background gradient color of circle lines.

Answer 1

You can do it like below:

.box {
  height: 150px;
  background: linear-gradient(90deg, red, yellow);
  position: relative;
  overflow: hidden;
  border-radius:20px;
}

.box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 200%;
  top: 0;
  left: 50%;
  background: repeating-radial-gradient(circle, transparent 0 20px, blue 21px 23px);
  clip-path: circle(farthest-side); /* to cut extra circles*/
}

<div class="box">

</div>