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

Answer 2

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