Skip to content
Related Articles

Related Articles

CSS | conic-gradient() Function
  • Difficulty Level : Medium
  • Last Updated : 22 Jun, 2020

The conic-gradient() function is an inbuilt function in CSS which is used to set a conic gradient as the background image. The conic gradient angle starts from 0 degrees – 360 degrees. Conic are circular and use the center of the element as the source point for color stop. 
Conic Gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which is a special kind of image.

Syntax: 
 

 Background image: conic-gradient(color degree, color degree, ...)  

Conic gradients are similar to radial gradients, except that the color stops are on the outer edge of the circle that gets created.

Example:

RADIAL GRADIENT:



CONIC GRADIENT:

Below example illustrates the conic-gradient() function in CSS:

Program 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>conic gradient</title>
    <style>
    .box
    {    
        background-color: yellow;
        height: 200px;
        width: 200px;
        float: left;
        margin: 20px;
        border-radius: 50%;
    }
    .a
    {
        background-image: 
          conic-gradient(red, yellow, green);
    }
    </style>
</head>
<body>
    <div class="box a"></div>
</body>
</html>

chevron_right


Output:

output 1 conic-gradient

Program 2:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>conic gradient</title>
    <style>
    .box
    {    
        background-color: yellow;
        height: 200px;
        width: 200px;
        float: left;
        margin: 20px;
        border-radius: 50%;
    }
    .b
    {
        background-image: conic-gradient(
              from 60deg, red, yellow, green);
    }
    </style>
</head>
<body>
    <div class="box b"></div>
</body>
</html>

chevron_right


Output:

Program 3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>conic gradient</title>
    <style>
    .box
    {    
        background-color: yellow;
        height: 200px;
        width: 200px;
        float: left;
        margin: 20px;
        border-radius: 50%;
    }
    .c
    {
        background-image: 
            conic-gradient(red, yellow, green, red);
    }
    </style>
</head>
<body>
    <div class="box c"></div>
</body>
</html

chevron_right


Output:

Program 4:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>conic gradient</title>
    <style>
    .box
    {    
        background-color: yellow;
        height: 200px;
        width: 200px;
        float: left;
        margin: 20px;
        border-radius: 50%;
    }
    .d
    {
        background-image:
 repeating-conic-gradient(
      red 0deg, red 10deg, yellow 10deg, yellow 20deg);    
    }     
    </style>
</head>
<body>
    <div class="box d"></div>
</body>
</html>

chevron_right


Output:

Program 5:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>conic gradient</title>
    <style>
    .box
    {    
        background-color: yellow;
        height: 200px;
        width: 200px;
        float: left;
        margin: 20px;
        border-radius: 50%;
    }
    .e
    {
        background-image: 
          conic-gradient(
                        red 0deg, red 90deg,
                        yellow 90deg, yellow 180deg,
                        green 180deg, green 270deg,
                        blue 270deg, blue 360deg);
    }
    </style>
</head>
<body>
    <div class="box e"></div>
</body>
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :