conic-gradient() CSS Function

Description

The CSS conic-gradient() function creates a gradient with color transitions rotated around a center point. It is similar to the radial-gradient() function, but instead of radiating from the center, the colors are rotated around it.

The conic-gradient() function takes at least two parameters:

  • The first parameter is the color stops, which are a list of colors and their corresponding positions. The positions can be specified in degrees or percentages.
  • The second parameter is the starting angle of the gradient, in degrees. The default starting angle is 0 degrees.

Optional parameters include:

  • The ending angle of the gradient, in degrees. The default ending angle is 360 degrees.
  • The size of the gradient, as a percentage of the containing element. The default size is 100%.
  • The position of the gradient center, as a percentage of the containing element. The default position is 50% 50%.

Here is an example of a conic-gradient() function:

.box {
  background-image: conic-gradient(red 0deg, yellow 120deg, green 240deg, blue 360deg);
}

This will create a background gradient with four colors: red, yellow, green, and blue. The red color will be at the top of the box, the yellow color will be on the right side, the green color will be on the bottom, and the blue color will be on the left side.

Conic gradients can be used to create a variety of effects, such as pie charts, color wheels, and loading spinners.

Here is a more complex example of a conic-gradient() function:

.box {
  background-image: conic-gradient(
    red 0deg,
    yellow 120deg,
    green 240deg,
    blue 360deg 50%,
    rgba(0, 0, 0, 0.5) 50%
  );
}

This will create a background gradient with five colors: red, yellow, green, blue, and black. The red, yellow, and green colors will be rotated around the center of the box, and the blue and black colors will be placed in the center of the box. The black color will be semi-transparent, so that the colors behind it can be seen.

Syntax

<conic-gradient()> =  conic-gradient([from angle] [at position,] color degree, color degree, ...);

Values

  • from angleThe entire conic gradient is rotated by this angle. Default value is 0deg. Optional.
  • at positionSpecifies the gradient center of the conic gradient. Default value is center. Optional.
  • color degreeColor stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%).

Example

<div id="grad1"></div>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: conic-gradient(red, yellow, green);
}

Browser Support

The following table will show you the current browser support for the CSS conic-gradient() function.

Desktop
Edge Chrome Firefox Opera Safari
7969835612.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
69834812.21069

Last updated by CSSPortal on: 7th October 2023