Действительно ли возможно иметь jQuery.click, включают вершину только?

Вы можете создать два псевдоэлемента CSS и настроить градиенты независимо друг от друга с помощью ограничителей высоты и цветового градиента.

Пример: https://codepen.io/giumagnani/pen/ZZpmje

div {
  margin: 100px 0;
  background: #2222ff;
  height: 600px;
  position: relative;
}

div::after {
  position: absolute;
  content: "";
  height: 30%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(white 0%, transparent 100%);
}

div::before {
  position: absolute;
  content: "";
  height: 30%;
  width: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent 0%, white 100%);
}