How to create a curve between two gradient divs in CSS?

Question

I have two divs with a special gradient background, and I need to create an S-Shape curve between them.

Here is an example script for gradient divs: https://jsfiddle.net/JerryGoyal/rjyfc46c/2/

<div id="section1"> </div> <div id="section2"> </div> #section1{ height:200px; background: linear-gradient(to bottom right, #ad3, #add); } #section2{ height:200px; background: linear-gradient(to bottom right, #de350b, #0065ff); } 

There are a few things that crossed my mind, but:

- svg: don't know how to handle another gradient div.
- border-radius: failed to get a true S-like curve, and it becomes ugly when I change the screen size.
- clip path: not supported by some browsers https://caniuse.com/css-clip-path
- image png: no! must be dynamic content.

Any help would be appreciated!

---

PS: a must read for future readers: https://css-tricks.com/creating-non-rectangular-headers/

Answer 1

Here is a solution using linearGradient with SVG.

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

 <div class="container"> <svg mlns='http://www.w3.org/2000/svg' viewBox="0 0 64 64"> <defs> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ad3" /> <stop offset="100%" stop-color="#add" /> </linearGradient> </defs> <path d='M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z' fill="url(#grad)"/> </svg> </div> 

Here is also a useful online tool for simple shape editing (just add the path to the URL to edit it http://jxnblk.com/paths/?d=M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z )

---

Another idea with the same SVG, which is used as a background, so that you can easily handle the content above it:

 .container { width: 500px; height: 200px; 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); display:flex; justify-content:space-around; align-items:center; flex-direction:column; color:#fff; } 

 <div class="container"> <p>TOP</p> <p>BOTTOM</p> </div>