<div class="header">
      <div class="ball">

        <svg
        width="1300px"
        height="300px"
        >       

          <ellipse
          rx="650px"
          ry="150px"
          cx="50%"
          cy="100%"
          fill="#ffffff"
          >
          </ellipse>

        </svg>
      </div>
    </div>

    html, body {
      margin: 0;
      padding: 0;
      background-color: #c3d5d9
    }   
    .header {
      position: relative;
      width: 100%;
      height: 186px;
      background-image: linear-gradient(to bottom, #00539d, #0094ec);
      background: #000000
    }   
    .ball {
      position: absolute;
      bottom: 0px;
      left: 300px;
    }