Как на css написать горбик?

.up, 
.bottom { 
  position: fixed; 
  left: 0px; 
  height: 50px; 
  width: 100%; 
} 
 
.up { 
  top: 0px; 
  background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.9)); 
} 
 
.bottom { 
  bottom: 0px; 
  border-radius: 20% 180% 0 0/200% 200% 0 0; 
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3)); 
} 
 
body { background-color: #00bcd4; background-image: url('https://i.stack.imgur.com/m9NKc.png'); }

<div class="up"></div> 
<div class="bottom"></div>