堆叠多个CSS渐变

我发现了类似的问题，但似乎没有什么能回答我的问题（如果可能的话）

我正在尝试堆叠多个渐变，从以下内容开始（向右）：

下面是一个工作堆栈片段

。内容背景{
宽度：100%；
高度：400px；
背景：线性梯度（向右，#3467a6，#c0d8dc 20%，#f3fbe6 50%，#c0d8dc 80%，#3467a6），
线性坡度（至底部，#3467a6 50%，#481f42）；
}

双线性渐变背景 在ZZZBOV评论之后，我尝试将两个

线性渐变添加到
背景图像


带有rgba（红绿蓝阿尔法）颜色的线性渐变，因此我们可以将阿尔法设置为部分透明


。示例{
显示：内联块；
宽度：100px；
高度：100px；
}
.首先{
背景图像：线性梯度（0度，rgba（255,0,0,0.2），rgba（0,200,0,0.2））；
}
.第二{
背景图像：线性梯度（90度，rgba（0，255，255，0.5），rgba（100，50，100，0.5））；
}
.双重恍惚{
背景图像：线性梯度（0度，rgba（255，0，0，0.2），rgba（0，200，0，0.2）），线性梯度（90度，rgba（0，255，255，0.5），rgba（100，50，100，0.5））；
*/
}

是的，可以这样做，但是你需要引入一些透明度来混合颜色。@Persijn.。我想我不想实际添加“到底部”，而是另一个“到右侧”的渐变，直到页面的一半才开始。
background: linear-gradient(to right, #3467a6, #c0d8dc 20%, #f3fbe6 50%, #c0d8dc 80%, #3467a6)