How to Create a Curve Between Two Gradient Using CSS

How to create a curve between two gradient using CSS?

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>

is it possible to do a curved line with css gradient?

You can get pretty close by using a radial-gradient instead of linear:

a {
background-image:   radial-gradient(ellipse farthest-corner at 0 140%, #3c84cc 0%, #316dc2 70%, #4e95d3 70%);  color: white;  width: 200px;  height: 50px;  border-radius: 10px;  margin-top: 50px;  display: block;  text-align: center;  line-height: 50px;}

<a>  Some button</a>

How to make a curved shape with gradient?

something like this would work:

div.cont:before {
    content: '';
    background-image: url(https://i.stack.imgur.com/2i7ed.png);
    background-size: 100% auto;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
}

<div class="cont" style="width: 100%;height:800px;background-image: url(https://i.stack.imgur.com/veeS8.png);background-size: 100% auto;background-repeat: no-repeat;position: relative;">

</div>

How to create a curved line with gradient?

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:10px 0;
  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:0 var(--l) var(--l) 0; /* Right & Bottom*/
   border-radius:0 0 var(--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) 0 0 var(--l); /* Top & Left */
   border-radius:var(--r) 0 0 0; /* Top-Left*/
}

body {
 background:pink;
}

<div class="box">
</div>

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

<div class="box" style="--r:100px;--l:2px;--w:100px;--c:blue">
</div>

Curved linear-gradient background?

is it this you want to do

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Document</title>
<style>
  div {
    background-image: radial-gradient(
      ellipse farthest-side at 92% 378%,
      #9fa4a9 21%,
      #7b7b7b 100%,
      #3e3f40 35%
    );
    width: 421px;
    height: 150px;
  }
</style>
</head>
<style></style>
<body>
<div></div>
</body>
</html>

Sample Image

CSS gradient to create two different color design

Use multiple gradient then adjust dimension and position to obtain what you want:

.grad {  height: 100px;  width: 300px;  background:  linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,  linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;}

<div class="grad"></div>