How to Create Conic Gradient in CSS: Syntax and Examples

Use the conic-gradient() CSS function to create a conic gradient by specifying colors and optional angles. It creates a smooth circular color transition around a center point, like slices of a pie chart.

Syntax

The conic-gradient() function creates a gradient rotated around a center point. It accepts color stops and optional angles to control the color distribution.

• from <angle>: Optional start angle for the gradient.
• at <position>: Optional center position (default is center).
• color stops: List of colors and optional stop points.

css

background: conic-gradient(from 0deg at center, red, yellow 90deg, green 180deg, blue 270deg, red 360deg);

Output

A circular gradient with red starting at 0°, transitioning to yellow at 90°, green at 180°, blue at 270°, and back to red at 360° around the center.

Example

This example shows a conic gradient background on a square div. The colors smoothly transition around the center, creating a pie-like effect.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
}

.box {
  width: 200px;
  height: 200px;
  background: conic-gradient(from 45deg at center, red, orange, yellow, green, blue, indigo, violet, red);
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

Output

A 200x200 pixel square with rounded corners showing a smooth rainbow conic gradient starting at 45 degrees from the center.

Common Pitfalls

Common mistakes when using conic-gradient() include:

• Not specifying color stops properly, causing abrupt color jumps.
• Forgetting the from angle, which defaults to 0deg but may not match your design.
• Using unsupported browsers (older browsers may not support conic gradients).

Always test in modern browsers and specify angles for precise control.

css

/* Wrong: abrupt color jump */
background: conic-gradient(red, blue);

/* Right: smooth transition with multiple stops */
background: conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

Output

The first background shows a sharp color change from red to blue. The second background smoothly transitions through multiple colors around the circle.

Quick Reference

Tips for using conic-gradient():

• Use from <angle> to rotate the gradient start.
• Use at <position> to move the center point.
• List colors in order with optional stop angles for smooth transitions.
• Works well for pie charts, color wheels, and circular progress indicators.

Key Takeaways

Use conic-gradient() to create circular color transitions around a center point.

Specify colors and optional angles to control the gradient's start and color stops.

Test in modern browsers as older ones may not support conic gradients.

Use multiple color stops for smooth transitions and avoid abrupt color jumps.

Adjust from and at parameters to customize rotation and center position.