CSS两层渐变效果

Question

我有CSS命令

.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);}

但我有问题。如何为下一层添加层？

我的想法从这个命令添加下一层是：

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 49%, rgba(0, 0, 0, 0) 100%);

我想要线性透明的圆。

Answer 1

您可以同时使用两个渐变。

.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: linear-gradient(to bottom, #f69d3c, #f69d3c, transparent, #f69d3c, #f69d3c), 
radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}

<div class="overlay-menu"></div>

Answer 2

是的，这是解决方案，但我想将橙色替换为透明色。

我正在添加的解决方案：

.overlay-menu {
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
-webkit-mask-image:
-webkit-gradient(linear, center bottom, center top,
color-stop(0, rgba(0, 0, 0, 0)),
color-stop(0.15, rgba(0, 0, 0, 0.6)),
color-stop(0.5, rgba(0, 0, 0, 0.8)),
color-stop(0.75, rgba(0, 0, 0, 0.6)),
color-stop(0.85, rgba(0, 0, 0, 0.5)),
color-stop(0.95, rgba(0, 0, 0, 0)));
}
<div class="overlay-menu"></div>