<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" preserveAspectRatio="none">
<defs>
    <linearGradient id="myGradient" gradientTransform="rotate(45)">
      <stop offset="5%"  stop-color="#fc6767" />
      <stop offset="95%" stop-color="#ec008c" />
    </linearGradient>
  </defs>
  <path d="M 0,0
         L 0,250
         Q 750,500 1500,250
         L 1500, 0
         Z" fill="url('#myGradient')" />
</svg>
<div class="holder">
  <p class="heading">This is the best workspace ever</p>
  <p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
body{
  padding:0;
  margin:0;
  font-family: 'Poppins', sans-serif;
}

svg{
  width:100%;
  position:relative;
}
.holder{
  position:absolute;
  top: 100px;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.heading{
  font-size:40px;
  font-weight:500;
  margin:5px;
  z-index:1;
  width:100%;
  color:#f5f6fa;
  text-align:center;
}
.tagline{
  font-size: 15px;
  font-weight: 200;
  width: 100%;
  color:#f5f6fa;
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.