¿Buena forma de crear una curva entre dos divs de gradiente en CSS?

Tengo dos divs con un fondo degradado distinto y necesito crear una curva en forma de S entre ellos.

Este es el ejemplo del violín para divs de gradiente: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/

 
 
 
 #section1{ height:200px; background: linear-gradient(to bottom right, #ad3, #add); } #section2{ height:200px; background: linear-gradient(to bottom right, #de350b, #0065ff); } 

Hay un par de cosas que cruzaron mi mente pero:

– svg: no sé cómo manejar otras div gradiente.
– radio del borde: no pude obtener una verdadera curva en forma de S y se pone feo cuando cambio el tamaño de la pantalla.
– clip-path: no es compatible con algunos navegadores https://caniuse.com/css-clip-path
– imagen png: no ! Necesita ser contenido dynamic.

¡Cualquier ayuda sería apreciada!

PD: una lectura obligada para futuros lectores: https://css-tricks.com/creating-non-rectangular-headers/

 .container { width: 500px; height: 200px; background:linear-gradient(to bottom right, #de350b, #0065ff); } svg { width:100%; }