Html 具有渐变颜色CSS的多条圆线

我想实现设计的旗帜与多个圆圈线梯度背景色。我对此做了更多的研究。我找不到与我的担忧相关的问题

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

下面的代码用于创建纯色背景横幅

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

我无法上传横幅的svg格式。它显示圆线的渐变阴影颜色。 我在这里找到了一些与我的问题相关的东西。 但这无助于我的担心

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

---

上面的css需要使用圆线的背景渐变色。

您可以按如下方式执行：

.盒子{ 高度：150像素； 背景：线性梯度90度，红色，黄色； 位置：相对位置； 溢出：隐藏； 边界半径：20px； } .box：：之前{ 内容：； 位置：绝对位置； 宽度：100%； 身高：200%； 排名：0； 左：50%； 背景：重复径向梯度圆，透明0 20px，蓝色21px 23px； 剪辑路径：CircleArtest side；/*用于剪切额外的圆*/ }

---

使用两个渐变。第二个应该是重复的径向的。谢谢你的回答。有创建重复径向圆的示例吗？