<div class="wrapper">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

.wrapper {
    background: linear-gradient(to bottom, #F2748B, #EA526F);
    overflow: hidden;
    max-height: 120vh;
}

.top {
    height: 20vh;
    width: 100vw;
}

.bottom {
    background: #FFFFFF;
    height: 300vw;
    width: 300vw;
    margin-left: -120vw;
    border-radius: 50% 50% 0 0;
    overflow: hidden;
}