CSS two layer gradient effect

Question

I have CSS command

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

but i have problem. How i can add layer for next layer?

My idea from this command add next layer where is:

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

I wanted circle with linear tranparency.

Answer 1

You can use two gradients together.

.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>