Create a full width semi circle with a div and radial gradient

Issue

I am trying to replicate the following footer design that uses a full width semi circle.

I'm attempting this simply with a radial-gradient background for my footer:

footer {
  width: 100%;
  position: relative;
  bottom: 0;
  background-image: radial-gradient(circle at center bottom, #387546, #387546 50%,transparent 50%);
  height: 30vh;
}

<footer></footer>

Here is the result I get:

How can I modify my radial-gradient to achieve this? Or is there a better method of getting the desired effect? (I'm just looking for the green semi-circle part of the design)

Solution

You might play with gradient size and position, and background size and position:

footer {
    width: 100%;
    position: relative;
    bottom: 0;
    background: radial-gradient(100% 120vh at 50% calc(100% + 30vh), #387546 calc(50% - 2px), #38754600 50%) 50% / calc(100% + 60vh) 100%;
    height: 30vh;
}

<footer></footer>

Answered By - Kosh