How To Create A Curved Line With Gradient?

I'm trying to insert a curve in the middle of a div, so i can achieve this result: This is what i did so far.

Solution 1:

Without gradient and with transparency you can consider pseudo element and border-radius. Each pseudo element will create half the curve and you join them to create the illusion of a continuous curve.

.box {
  height:150px;
  margin:10px0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */--r:90px; /* The curve radius */--w:60%;  /* The width of the left part (i.e distance of the curve from the left) */--c:red;  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l)); /* each one will take half the height minus border width*/border-style:solid;
  border-color:var(--c);
}
/* Left part */.box:before {
   bottom:0;
   left:0;
   width:var(--w);
   border-width:0var(--l) var(--l) 0; /* Right & Bottom*/border-radius:00var(--r) 0; /* Bottom-right*/
}
/* Right part*/.box:after {
   top:0;
   right:calc(-1 * var(--l)); /* Move slightly to the right to have a perfect join */width:calc(100% - var(--w));
   border-width:var(--l) 00var(--l); /* Top & Left */border-radius:var(--r) 000; /* Top-Left*/
}

body {
 background:pink;
}

<divclass="box"></div><divclass="box"style="--r:40px;--l:5px;--w:70%;--c:green"></div><divclass="box"style="--r:100px;--l:2px;--w:100px;--c:blue"></div>

---

With gradient and without transparency you can rely on mulitple background coloration to approximate it. The idea is to have the gradient you want below and you cover it with other layers to keep only the curve visible:

.box {
  --w:4px;
  height:150px;
  position:relative;
  z-index:0;
  background:
    radial-gradient(farthest-side at bottom right,grey calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,grey) top 0 right calc(40% - 0.6*56px + var(--w)/2)/54px50%,
    radial-gradient(farthest-side at top left,grey calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,grey)  bottom 0 left calc(60% - 0.4*56px + var(--w)/2)/54px50%,
    
    
    linear-gradient(grey,grey) bottom right/calc(40% - 50px)  calc(100% - var(--w)),
    linear-gradient(grey,grey) bottom right/calc(40% - var(--w)/2 + 1px) 50%,
    linear-gradient(grey,grey) top    left /calc(60% - 50px) calc(100% - var(--w)),
    linear-gradient(grey,grey) top    left /calc(60% - var(--w)/2 + 1px) 50%,
    
    
    linear-gradient(to right, yellow, purple, blue, green, red, orange);
  background-repeat:no-repeat;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
}

<divclass="box"></div><divclass="box"style="--w:6px"></div>

This one is a bit tricky but you can change the coloration of each gradient to better identify each layer.

.box {
  --w:4px;
  height:150px;
  position:relative;
  z-index:0;
  background:
    radial-gradient(farthest-side at bottom right,pink calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,red) top 0 right calc(40% - 0.6*56px + var(--w)/2)/54px50%,
    radial-gradient(farthest-side at top left,yellow calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,orange)  bottom 0 left calc(60% - 0.4*56px + var(--w)/2)/54px50%,
    
    
    linear-gradient(green,green) bottom right/calc(40% - 50px)  calc(100% - var(--w)),
    linear-gradient(purple,purple) bottom right/calc(40% - var(--w)/2 + 1px) 50%,
    linear-gradient(blue,blue) top    left /calc(60% - 50px) calc(100% - var(--w)),
    linear-gradient(black,black) top    left /calc(60% - var(--w)/2 + 1px) 50%,
    
    
    /*linear-gradient(to right, yellow, purple, blue, green, red, orange)*/
    white;
  background-repeat:no-repeat;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
}

<divclass="box"></div><divclass="box"style="--w:6px"></div>

Related question to get more details about the different values: Using percentage values with background-position on a linear-gradient

---

Another idea (based on the first code) to have gradient but still without transparency:

.box {
  height:150px;
  margin:10px0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */--r:90px; /* The curve radius */--c:to right, yellow, purple, blue, green, red, orange;  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l));
  border-style:solid;
  border-color:transparent;
  background:
    linear-gradient(pink,pink) padding-box, /* The same as the main background only on the padding-box*/linear-gradient(var(--c)) border-box;   /* Main coloration will cover the border-box */
}
.box:before {
   bottom:0;
   left:0;
   width:40%;
   border-width:0var(--l) var(--l) 0;
   border-radius:00var(--r) 0;
   background-size:calc(100/40 * 100%) 200%; /* 100/X where X is the width*/background-position:leftbottom;
}
.box:after {
   top:0;
   right:calc(-1 * var(--l));
   width:60%;
   border-width:var(--l) 00var(--l);
   border-radius:var(--r) 000;
   background-size:calc(100/60 * 100%) 200%; /* 100/X where X is the width*/background-position:righttop;
}

body {
 background:pink;
}

<divclass="box"></div><divclass="box"style="--r:40px;--l:10px;--c:to bottom,red,yellow,green"></div><divclass="box"style="--r:100px;--l:2px;--c:45deg,purple,#000,orange"></div>

And we add mask to be above to get transparency:

.box {
  height:150px;
  margin:10px0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */--r:90px; /* The curve radius */--c:linear-gradient(to right, yellow, purple, blue, green, red, orange);  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l));
  border-style:solid;
  border-color:transparent;
  background: var(--c) border-box; 
  -webkit-mask:
    linear-gradient(#fff00) padding-box,
    linear-gradient(#fff00);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}
.box:before {
   bottom:0;
   left:0;
   width:40%;
   border-width:0var(--l) var(--l) 0;
   border-radius:00var(--r) 0;
   background-size:calc(100/40 * 100%) 200%; /* 100/X where X is the width*/background-position:leftbottom;
}
.box:after {
   top:0;
   right:calc(-1 * var(--l));
   width:60%;
   border-width:var(--l) 00var(--l);
   border-radius:var(--r) 000;
   background-size:calc(100/60 * 100%) 200%; /* 100/X where X is the width*/background-position:righttop;
}

body {
 background:pink;
}

<divclass="box"></div><divclass="box"style="--r:40px;--l:10px;--c:linear-gradient(to bottom,red,yellow,green)"></div><divclass="box"style="--r:100px;--l:2px;--c:linear-gradient(45deg,purple,#000,orange)"></div>