CSS

conic-gradient()

The CSS function creates a conic gradient — a background image with color transitions rotated around a central point. The syntax and examples of using the function.

Time to read: less than 5 min

Briefly

The conic-gradient function is used to set a background as a conic gradient.

Example

        
          
          .element {  background-image: conic-gradient(#3590eb, #ee82cf);}
          .element {
  background-image: conic-gradient(#3590eb, #ee82cf);
}
Open demo in the new window

Understanding

A gradient is a smooth transition between colors. In a conic gradient, the colors rotate around a central point, like the hands of a clock (or as in a pie chart). The name of the gradient has nothing to do with cones; it comes from the fact that the resulting image often resembles a cone from above.

Syntax

The simplest syntax for a conic gradient with two colors:

        
          
          .element {  background-image: conic-gradient(white, black);}
          .element {
  background-image: conic-gradient(white, black);
}

By default, the starting point of the gradient (the first color in the list) will pass through a line connecting the central and top points of the element (like clock hands at 12:00), and then the colors will follow in a clockwise fashion.

The compact syntax white, black actually consists of several defaults: the starting angle, the position of the center, and the coordinates of the colors:

        
          
          .element {  background-image: conic-gradient(from 0turn at 50% 50%, white 0%, black 100%);}
          .element {
  background-image: conic-gradient(from 0turn at 50% 50%, white 0%, black 100%);
}

Starting Angle and Center Position

The angle at which the colors start can be changed. For example, a quarter turn can be written as from 0.25turn (turns) or from 90deg (degrees) or from 1.57rad (radians) or 100grad (grads). You can also change the coordinates of the central point around which the gradient is drawn, for example, at 20% 70% or at center top.

Color Boundaries

You can specify any number of colors in any available format. If you simply list the colors separated by commas, they will be evenly distributed around the circle, smoothly transitioning from one to the other. You can define your placement boundaries for colors using the same units of measurement as for setting the starting angle of the gradient, plus you can use percentage values. For example, in conic-gradient(white, grey 25%, black) the midpoint of the gray color will be at 25%.

Another option is to specify a mid-point where two adjacent colors will blend (the midpoint of the transition). For example, in conic-gradient(white, black), the colors will blend in the middle at 0.5turn, and in conic-gradient(white, 0.25turn, black) the color mixing mid-point will occur at the first quarter of the circle.

To create hard transitions, without a smooth gradient, you can specify two points for each color (the boundaries of their start and end), and the next color must start from the same point where the previous one ended. For example, conic-gradient(#fff 25%, #bbb 25% 50%, #666 50% 75%, #000 75%).

Open demo in the new window 
        
          
          .element-2 {  background-image: conic-gradient(    from 45deg at 25% center,    white,    #d6f78a 25%,    0.45turn,    rgb(127, 235, 235)    210deg 5.9rad,    hsl(278, 81%, 79%)    361grad  );}
          .element-2 {
  background-image: conic-gradient(
    from 45deg at 25% center,
    white,
    #d6f78a 25%,
    0.45turn,
    rgb(127, 235, 235)
    210deg 5.9rad,
    hsl(278, 81%, 79%)
    361grad
  );
}

Tips

For easier creation of repeating conic gradients, there is the function repeating-conic-gradient().

In practice

Advice 1

🛠 The color wheel can be created by simply listing the main colors. The first and last color should be the same (red) to achieve a smooth gradient.

Open demo in the new window 
        
          
          .color-circle {  background: conic-gradient(    red,    orange,    yellow,    green,    blue,    purple,    red  );}
          .color-circle {
  background: conic-gradient(
    red,
    orange,
    yellow,
    green,
    blue,
    purple,
    red
  );
}

🛠 To create a pie chart, you need to define hard transitions between colors using two values that indicate the start and end of each color:

Open demo in the new window 
        
          
          .pie-chart {  background-image: conic-gradient(    coral 27deg,    palegreen 27deg 150deg,    skyblue 150deg  );}
          .pie-chart {
  background-image: conic-gradient(
    coral 27deg,
    palegreen 27deg 150deg,
    skyblue 150deg
  );
}

🛠 A simple background pattern in the form of a pyramid can easily be created using a conic gradient:

Open demo in the new window 
        
          
          .pyramid {  background-image: conic-gradient(    from -0.125turn,    #bbb 0.25turn,    #999 0.25turn 0.5turn,    #bbb 0.5turn 0.75turn,    #eee 0.75turn  );}
          .pyramid {
  background-image: conic-gradient(
    from -0.125turn,
    #bbb 0.25turn,
    #999 0.25turn 0.5turn,
    #bbb 0.5turn 0.75turn,
    #eee 0.75turn
  );
}

🛠 In combination with the background-size property, various repeating patterns can be created, for example, a chessboard:

Open demo in the new window 
        
          
          .chess-board {  background-image: conic-gradient(    peru 25%,    cornsilk 25% 50%,    peru 50% 75%,    cornsilk 75%  );  background-size: 25% 25%;}
          .chess-board {
  background-image: conic-gradient(
    peru 25%,
    cornsilk 25% 50%,
    peru 50% 75%,
    cornsilk 75%
  );
  background-size: 25% 25%;
}

🛠 This sun pattern consists of just one element to which both radial and conic gradients are applied:

Open demo in the new window 
        
          
          .sun {  background:    radial-gradient(      yellow 5%,      gold 31% 32%,      transparent 32.5% 50%,      lightskyblue 70%    ),    conic-gradient(      transparent 3%,      yellow 5% 8%,      transparent 10% 13%,      yellow 15% 17%,      transparent 20% 23%,      yellow 25% 28%,      transparent 30% 33%,      yellow 35% 38%,      transparent 40% 43%,      yellow 45% 48%,      transparent 50% 53%,      yellow 55% 58%,      transparent 60% 63%,      yellow 65% 68%,      transparent 70% 73%,      yellow 75% 78%,      transparent 80% 83%,      yellow 85% 88%,      transparent 90% 93%,      yellow 95% 98%,      transparent    );}
          .sun {
  background:
    radial-gradient(
      yellow 5%,
      gold 31% 32%,
      transparent 32.5% 50%,
      lightskyblue 70%
    ),
    conic-gradient(
      transparent 3%,
      yellow 5% 8%,
      transparent 10% 13%,
      yellow 15% 17%,
      transparent 20% 23%,
      yellow 25% 28%,
      transparent 30% 33%,
      yellow 35% 38%,
      transparent 40% 43%,
      yellow 45% 48%,
      transparent 50% 53%,
      yellow 55% 58%,
      transparent 60% 63%,
      yellow 65% 68%,
      transparent 70% 73%,
      yellow 75% 78%,
      transparent 80% 83%,
      yellow 85% 88%,
      transparent 90% 93%,
      yellow 95% 98%,
      transparent
    );
}

The code can be simplified even further by replacing the conic gradient with repeating-conic-gradient:

        
          
          .sun {  background:    radial-gradient(      yellow 5%,      gold 31% 32%,      transparent 32.5% 50%,      lightskyblue 70%    ),    repeating-conic-gradient(      yellow 0% 1%,      transparent 4% 6%,      yellow 9% 10%    );}
          .sun {
  background:
    radial-gradient(
      yellow 5%,
      gold 31% 32%,
      transparent 32.5% 50%,
      lightskyblue 70%
    ),
    repeating-conic-gradient(
      yellow 0% 1%,
      transparent 4% 6%,
      yellow 9% 10%
    );
}

Read also

We use cookies for the analytics