CSS Conic Gradients

CSS Conic Gradients


CSS Conic Gradient -
In this gradient color transitions rotate around a center point.
At least two color are needed to make a conic gradient,but 
More color can be used.
Syntax - 
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
NOTE - 
By default, angle is 0deg and position is center.
Now we will see Example  -
Example - Using three color - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
  .gradient {
    background-image: conic-gradient(rgb(255, 0, 255), rgb(98, 0, 255), rgb(80, 204, 142));

width: 10rem;
height: 5rem;
}
  }
  </style>
</head>

<body>
  <div class="gradient"></div></body>
</html>
Output - 
Example 2 - 
The following example shows a conic gradient with three colors and a degree for each color - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
  .gradient {
    background-image: conic-gradient(rgb(153, 0, 255) 47deg, rgb(21, 34, 219) 95deg, rgba(159, 230, 243, 0.952) 220deg);

width: 10rem;
height: 5rem;
}
  }
  </style>
</head>

<body>
  <div class="gradient"></div></body>
</html>
Output -
Example 3 - 
The following example shows a conic gradient with a from angle of 90deg -
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
  .gradient {
    background-image: conic-gradient(from 90deg, rgb(98, 0, 255), rgb(0, 255, 234), rgb(34, 1, 110));

width: 10rem;
height: 5rem;
}
  }
  </style>
</head>

<body>
  <div class="gradient"></div></body>
</html>
Output - 
Repeating a Conic Gradient
Example - 
The repeating-conic-gradient() function is used to repeat conic gradients - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
  .gradient {
    background-image: repeating-conic-gradient(rgb(0, 26, 255) 10%, rgb(255, 230, 0) 20%);
    border-radius: 333px;
width: 10rem;
height: 5rem;
}
  }
  </style>
</head>

<body>
  <div class="gradient"></div></body>
</html>
Output -