html - 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%);

我想要 circle with linear tranparency .

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>