How to create a curve between two gradient using CSS?

Question

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

Here\'s the example fiddle for gradient divs: https

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%;
}

Here is also a useful online tool to easily edit the shape (simply append the path to the URL to edit ithttp://jxnblk.com/paths/?d=M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z )

---

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

.container {
  width: 500px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,'), 
  linear-gradient(to bottom right, #de350b, #0065ff);
  
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction:column;
  color:#fff;
}

TOP
BOTTOM

---

In case you want a pure CSS solution with no SVG involved here is one using mask and radial-gradient:

.box {
  height:200px;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background: linear-gradient(to bottom right, #ad3, #add);
}
.box:after {
  -webkit-mask:
    radial-gradient(100% 80% at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(100% 80% at bottom,transparent 79.5%,white 80%) right;
  mask:
    radial-gradient(100% 80% at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(100% 80% at bottom,transparent 79.5%,white 80%) right;
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:50.1% 100%;
  mask-repeat:no-repeat;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}

Adjust the different values to control the curve. The trick is to make sure both are the same and start at the same point to create a contiguous shape. You can introduce CSS variables to easily control this:

.box {
  height:200px;
  margin:10px;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  background: linear-gradient(to bottom right, #ad3, #add);
}
.box:after {
  -webkit-mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(var(--r1,100%) var(--r2,80%) at bottom,transparent 79.5%,white 80%) right;
  mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at top   ,white 79.5%,transparent 80%) left,
    radial-gradient(var(--r1,100%) var(--r2,80%) at bottom,transparent 79.5%,white 80%) right;
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:50.1% 100%;
  mask-repeat:no-repeat;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}

To make things funnier we can add a border between both gradient following the curve where we can place another gradient!

.box {
  height:200px;
  margin:10px;
  position:relative;
  background:linear-gradient(to right,blue,black);
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:calc(100% - var(--b,10px)); /*control the gap here*/
  -webkit-mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p1,top)   ,white 79.5%,transparent 80%) var(--d1,right),
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p2,bottom),transparent 79.5%,white 80%) var(--d2,left);
  mask:
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p1,top)   ,white 79.5%,transparent 80%) var(--d1,right),
    radial-gradient(var(--r1,100%) var(--r2,80%) at var(--p2,bottom),transparent 79.5%,white 80%) var(--d2,left);
  -webkit-mask-size:50.1% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-size:50.1% 100%;
  mask-repeat:no-repeat;
}
.box:before {
  top:0;
  background:linear-gradient(to bottom right, #de350b, #0065ff);
}
.box:after {
  bottom:0;
  background: linear-gradient(to bottom right, #ad3, #add);
  --p1:bottom;
  --p2:top;
  --d1:left;
  --d2:right;
}