Q:

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

Есть блок, хочу сделать плавный переход на белый цвет.
1 вариант - svg - не шарю, и не хочу кешировать, с png такая же история.
Попытки создать на css - обламались.

A:

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

