CSS Conic Gradients

Last Updated : 24 Apr, 2025

CSS Conic Gradients is an inbuilt CSS function that is used to create a gradient with a color transition rotated at a center not radiated from the center.

The conic gradient angle starts from 0 degrees – 360 degrees. 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([from angle] [at position,] color [degree], color [degree], ...);

By default, the Conic Gradient angle is 0deg and the position is center.

Example 1: In this example, we will see the use of a conic gradient.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
          Conic Gradient
      </title>
  
    <style>
        .box {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-image:
                conic-gradient(red, yellow, green);
        }
    </style>
</head>

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

</html>

Output:

Screenshot-(46)

Example 2: In this example, we will use a gradient at 45 degrees.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Conic Gradient</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
           background-image: 
                conic-gradient(from 40deg, #84c73d, #bdd85b);
        
        }
    </style>
</head>

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

</html>

Output:

Screenshot-(47)

Example 3: In this example, we will use repeat the conic gradient by using the repeat-conic-gradient() built-in function.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>conic gradient</title>
    <style>
        .box {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-image: 
                repeating-conic-gradient(rgb(123, 255, 0) 10%, 
                                         rgb(14, 194, 164) 20%);
        
        }
    </style>
</head>

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

</html>

Output:

Screenshot-(48)

CSS Gradients

M

mansigeekso9ii

Improve

Article Tags :

Similar Reads

CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.Types of

CSS conic-gradient() Function

The conic-gradient() function is an inbuilt function in CSS that 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

CSS Radial Gradients

CSS Radial Gradients are used for creating visually appealing backgrounds on web pages. This inbuilt CSS function allows you to create a smooth transition between two or more colors, originating from a central point and expanding outward in a circular or elliptical shape. By default, the gradient st

Gradient borders in CSS

Creating visually appealing borders can significantly enhance the user experience on your website. One such technique is the use of gradient borders. Although CSS does not directly support gradient borders, there are two effective methods to achieve this:Property ValuesValueDescriptionlinear-gradien

HTML Canvas Gradients

HTML Canvas Gradients is used to give a gradient effect on Canvas with the help of JavaScript. The different shapes, such as rectangles, circles, lines, text, etc, can be filled with Gradients. To create a gradient on Canvas, we can use two techniques, Linear Gradient and Radial Gradient. Linear Gra

CSS repeating-conic-gradient() Function

The repeating-conic-gradient() function is an inbuilt function in CSS that is used to repeat conic gradients in the background image.Syntax:background-image:repeating-conic-function(from angle, color degree1 degree2, color degree1 degree 2, ...);Parameters:angle: This parameter takes an angle as its

CSS Linear Gradient

CSS Linear Gradient is a built-in function that enables you to create smooth transitions between two or more colors along a straight line. This function is highly versatile, allowing you to specify the starting point and direction (or angle) of the gradient, thereby determining the flow of colors. W

Tailwind CSS Gradient Color Stops

This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS Gradients property. Gradient Color Stops classes: from-transparent: This class is used to set the start color transparency.from-current: This class is used to ado

CSS Rounded Corners

CSS Rounded Corner functionality, facilitated by the border-radius property, is an essential for modern web design. This property allows developers to create rounded corners for elements, enhancing the visual appeal and user experience of a website. The border-radius property in CSS is versatile, en

Bootstrap 5 Background gradient

Bootstrap 5 Background gradient is used to add a gradient to the background. Semi-transparent white serves as the gradient's starting point and fades off toward the bottom. By using the gradient in CSS, we can create variants styling of images which can help to make an attractive webpage. iframe { w