Conic Gradient CSS Generator — Free, Instant Code, No Signup

Conic gradients are the most versatile — and least understood — of the three CSS gradient types. While linear and radial gradients create smooth colour transitions, conic gradients rotate around a central point, making them the go-to for pie charts, colour wheels, loading spinners, and starburst patterns. This guide covers how to generate conic gradient CSS code, with examples of every practical use case.

What Makes Conic Gradient Different From Linear and Radial

Linear gradients blend colours in a straight line. Radial gradients blend outward from a point. Conic gradients sweep colours around a centre point, like the hands of a clock.

The syntax: conic-gradient(from 0deg, red, yellow, green, blue, red)

The from Xdeg sets the starting angle. Colour stops without position values are evenly distributed around 360 degrees. Add position values for precise pie-chart slices: conic-gradient(red 0% 30%, blue 30% 70%, green 70% 100%).

Browser support: full in all modern browsers since 2023. No prefix needed.

How to Generate a Conic Gradient With the Free CSS Generator

Open the free CSS gradient generator and select the conic gradient type. Add your colour stops — the generator arranges them around the 360-degree sweep automatically. Adjust the starting angle with the rotation control to shift where the gradient begins.

The live preview shows the result as you build it. Copy the full conic-gradient() CSS value with one click. The output is ready to paste directly into your stylesheet.

For pie chart slices with exact percentages: add colour stops with percentage position values. For a smooth colour wheel: use evenly spaced stops in rainbow order without position values.

Sell Custom Apparel — We Handle Printing & Free Shipping

Practical Conic Gradient Use Cases With CSS Code

Pie chart (pure CSS):

background: conic-gradient(#e53e3e 0% 35%, #3182ce 35% 65%, #38a169 65% 100%);
border-radius: 50%;

Change the percentage breakpoints to match your data. Add width and height for a circular chart.

Colour wheel:

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%;

Loading spinner (animated):

background: conic-gradient(#7c3aed 0%, transparent 80%);
border-radius: 50%;
animation: spin 1s linear infinite;

Checkerboard pattern (repeating):

background: repeating-conic-gradient(#000 0% 25%, #fff 25% 50%);
background-size: 40px 40px;

Conic vs Radial Gradient — Which to Use

Use case	Conic	Radial
Pie / donut chart	Yes — ideal	No
Colour wheel	Yes	No
Spotlight effect	No	Yes — ideal
Circular gradient from centre	No	Yes
Loading spinner	Yes	Possible
Checkerboard / tile pattern	Yes (repeating)	No
Blob / mesh effect	No	Yes

The rule: if the gradient rotates around a point, use conic. If it radiates outward from a point, use radial.

Frequently Asked Questions

Is conic-gradient supported in all browsers?

Yes. All modern browsers support conic-gradient without vendor prefixes as of 2024. Safari added support in version 12.1; Chrome and Firefox have supported it since 2020.

Can I animate a conic gradient?

You can animate the element that has the conic gradient (rotation, scale, opacity) but you cannot directly transition between two conic-gradient values. For spinning spinner effects, animate the element with transform: rotate() rather than the gradient itself.

What is the difference between conic-gradient and repeating-conic-gradient?

conic-gradient fills 360 degrees once. repeating-conic-gradient tiles the gradient pattern repeatedly around the centre — useful for checkerboard, starburst, and tile patterns.