CSS conic-gradient()

The CSS conic-gradient() function is used to define the background-image property, to set gradient colored background, where the color transitions tappers from a circular base to a point (around the center). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {height: 320px; background-image: conic-gradient(red, green, black, purple);}
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

The word cone refers to a solid or a hollow object that tappers from a circular base to a point. And the word conic refers to something of type cone.

CSS conic-gradient() Syntax

The syntax of conic-gradient() function in CSS, is:

background-image: conic-gradient(from angle at position colorOne degree, colorTwo degree, ..., colorN degree);

from angle - This parameter is used when we need to rotate the entire gradient effect by specified angle. It is an optional parameter.

at position - This parameter is used when we need to specify the custom center of the conic gradient. The default value is center. This is also an optional parameter.

degree - This parameter is used when we need to specify the stop position of a color. The value that can used as degree is either from 0 to 360 or from 0% to 100%. This is another an optional parameter.

Note - You need to provide at least two colors to create conic-gradient() background.

CSS conic-gradient() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g, #h {width: 220px; height: 220px; margin-bottom: 20px;}
      #a {background-image: conic-gradient(red, green, black, purple);}
      #b {background-image: conic-gradient(red 45deg, green, black, purple);}
      #c {background-image: conic-gradient(red 90deg, green, black, purple);}
      #d {background-image: conic-gradient(red 180deg, green, black, purple);}
      #e {background-image: conic-gradient(red 360deg, green, black, purple);}
      #f {background-image: conic-gradient(red, green, black, purple 180deg);}
      #g {background-image: conic-gradient(red, green, black 180deg, purple);}
      #h {background-image: conic-gradient(red 180deg, green, black, purple 180deg);}
   </style>
</head>
<body>
   
   <h3>background-image: conic-gradient(red, green, black, purple)</h3>
   <div id="a">
   </div>
   
   <h3>background-image: conic-gradient(red 45deg, green, black, purple)</h3>
   <div id="b">
   </div>
   
   <h3>background-image: conic-gradient(red 90deg, green, black, purple)</h3>
   <div id="c">
   </div>
   
   <h3>background-image: conic-gradient(red 180deg, green, black, purple)</h3>
   <div id="d">
   </div>
   
   <h3>background-image: conic-gradient(red 360deg, green, black, purple)</h3>
   <div id="e">
   </div>
   
   <h3>background-image: conic-gradient(red, green, black, purple 180deg)</h3>
   <div id="f">
   </div>
   
   <h3>background-image: conic-gradient(red, green, black 180deg, purple)</h3>
   <div id="g">
   </div>
   
   <h3>background-image: conic-gradient(red 180deg, green, black, purple 180deg)</h3>
   <div id="h">
   </div>
   
</body>
</html>

Output

background-image: conic-gradient(red, green, black, purple)

background-image: conic-gradient(red 45deg, green, black, purple)

background-image: conic-gradient(red 90deg, green, black, purple)

background-image: conic-gradient(red 180deg, green, black, purple)

background-image: conic-gradient(red 360deg, green, black, purple)

background-image: conic-gradient(red, green, black, purple 180deg)

background-image: conic-gradient(red, green, black 180deg, purple)

background-image: conic-gradient(red 180deg, green, black, purple 180deg)

Let's create another example that uses conic-gradient(), along with the from angle and/or at position

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k {width: 220px; height: 220px; margin-bottom: 20px;}
      #a {background-image: conic-gradient(red, green, black, purple);}
      #b {background-image: conic-gradient(from 45deg, red, green, black, purple);}
      #c {background-image: conic-gradient(from 90deg, red, green, black, purple);}
      #d {background-image: conic-gradient(from 180deg, red, green, black, purple);}
      #e {background-image: conic-gradient(from 270deg, red, green, black, purple);}
      #f {background-image: conic-gradient(from 360deg, red, green, black, purple);}
      #g {background-image: conic-gradient(at 10%, red, green, black, purple);}
      #h {background-image: conic-gradient(at 40%, red, green, black, purple);}
      #i {background-image: conic-gradient(at 50% 10%, red, green, black, purple);}
      #j {background-image: conic-gradient(at 60% 70%, red, green, black, purple);}
      #k {background-image: conic-gradient(from 180deg at 60% 70%, red, green, black, purple);}
   </style>
</head>
<body>
   
   <h3>{background-image: conic-gradient(red, green, black, purple)</h3>
   <div id="a">
   </div>
   
   <h3>background-image: conic-gradient(from 45deg, red, green, black, purple)</h3>
   <div id="b">
   </div>
   
   <h3>background-image: conic-gradient(from 90deg, red, green, black, purple)</h3>
   <div id="c">
   </div>
   
   <h3>background-image: conic-gradient(from 180deg, red, green, black, purple)</h3>
   <div id="d">
   </div>
   
   <h3>background-image: conic-gradient(from 270deg, red, green, black, purple)</h3>
   <div id="e">
   </div>
   
   <h3>background-image: conic-gradient(from 360deg, red, green, black, purple)</h3>
   <div id="f">
   </div>
   
   <h3>background-image: conic-gradient(at 10%, red, green, black, purple)</h3>
   <div id="g">
   </div>
   
   <h3>background-image: conic-gradient(at 40%, red, green, black, purple)</h3>
   <div id="h">
   </div>
   
   <h3>background-image: conic-gradient(at 50% 10%, red, green, black, purple)</h3>
   <div id="i">
   </div>
   
   <h3>background-image: conic-gradient(at 60% 70%, red, green, black, purple)</h3>
   <div id="j">
   </div>
   
   <h3>background-image: conic-gradient(from 180deg at 60% 70%, red, green, black, purple)</h3>
   <div id="k">
   </div>
   
</body>
</html>

Output

{background-image: conic-gradient(red, green, black, purple)

background-image: conic-gradient(from 45deg, red, green, black, purple)

background-image: conic-gradient(from 90deg, red, green, black, purple)

background-image: conic-gradient(from 180deg, red, green, black, purple)

background-image: conic-gradient(from 270deg, red, green, black, purple)

background-image: conic-gradient(from 360deg, red, green, black, purple)

background-image: conic-gradient(at 10%, red, green, black, purple)

background-image: conic-gradient(at 40%, red, green, black, purple)

background-image: conic-gradient(at 50% 10%, red, green, black, purple)

background-image: conic-gradient(at 60% 70%, red, green, black, purple)

background-image: conic-gradient(from 180deg at 60% 70%, red, green, black, purple)

CSS Online Test

« Previous Tutorial Next Tutorial »