Use SVG like the background image

Gradient Version

.box {
    
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23ad3" /><stop offset="100%" stop-color="%23add" /></linearGradient></defs><path d="M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z"  fill="url(%23grad)"/></svg>'), 
  linear-gradient(to bottom right, #de350b, #0065ff);
}

Solid Version

.box {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none"><path d="M0 56 C30 28 38 34 64 26 L64 0 L0 0 Z" fill="red"/></svg>') top/100% 80% no-repeat,
    linear-gradient(to bottom right, #FFF, blue);
  height:400px;
}