Skip to content
ToolQivo

Conic Gradient Generator

Build conic gradients — pie charts, colour wheels and sweeps.

Color Tools Reviews Free · no sign-up

The sweep

CSS 
The declaration appears here

Quick Tool Overview

The Conic Gradient Generator sweeps colour around a centre point, which is what lets CSS draw a pie chart, a progress ring or a colour wheel with no SVG — using hard stops, which the tool generates from plain percentages.

What it does
Builds CSS conic gradients
You give it
A centre, a start angle and colour stops
You get back
The declaration, with presets for charts
Best for
Pie charts, progress rings and colour wheels
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Conic Gradient Generator

A conic gradient sweeps around a centre point rather than outward from it, which is what makes it the only gradient that can draw a pie chart, a colour wheel or a progress ring in pure CSS, with no SVG and no canvas.

Hard stops are the technique that unlocks most of it. Putting two colour stops at the same position gives a clean edge instead of a blend, and a series of those is a pie chart — each segment a pair of stops at the angles you want.

The generator covers the smooth case and the hard-stop case, with presets for the shapes people actually build: pie charts from a list of percentages, progress rings, colour wheels, and the checkerboard that marks transparency. Percentages can be entered directly and converted to angles, since a pie chart is specified in parts of a whole rather than in degrees.

Key features of the Conic Gradient Generator

Hard stops from percentages

Enter 40% and 35% and get the angles; two stops at one position give the clean edge a chart segment needs.

Chart presets

Pie chart, progress ring, colour wheel and the transparency checkerboard, all in pure CSS.

The jagged-edge fix

Hard stops are not antialiased, and offsetting them by half a degree solves it. The generator does it for you.

Start angle control

Because a pie chart starts at the top, not at three o’clock where the default puts it.

No fallback needed

Supported everywhere since 2020, so the output is one declaration rather than three.

How to use the Conic Gradient Generator

  1. 1

    Set the centre and start angle

    Where the sweep begins, which for a pie chart is usually the top.

  2. 2

    Add your colour stops

    As angles or percentages. Two stops at the same position give a hard edge.

  3. 3

    Try a preset

    Pie chart, progress ring, colour wheel or checkerboard.

  4. 4

    Copy the CSS

    One declaration, with a border-radius line for the round versions.

Frequently asked questions

Use hard stops — two stops at the same angle — and set border-radius to 50%. Each segment is a colour from one angle to the next. The generator will take percentages and convert them for you.

Reviews of the Conic Gradient Generator

What people who use the Conic Gradient Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Conic Gradient Generator. It takes half a minute and no account.

Write the first review

More color tools