Super Boring Tools

Search tools

Find a tool by name or what it does.

Conic Gradient Generator

Build a CSS conic gradient visually and copy the background code.

Preview
Color stops
background: conic-gradient(from 0deg at 50% 50%, #6366f1 0deg, #ec4899 180deg, #6366f1 360deg);

How to make a conic gradient

  1. Add color stops

    Pick each color and set the angle where it sits around the sweep. Add or remove stops with the controls beside the preview.

  2. Set the center and start

    Move the center point and rotate the starting angle so the colors sweep exactly where you want them.

  3. Choose repeat

    Turn on repeating mode to tile the color sweep into evenly spaced bands for pie and pinwheel effects.

  4. Copy the CSS

    Copy the generated background declaration and paste it straight into your stylesheet.

Why use this tool

Live sweep preview

The circular preview updates the moment you change a color, angle, center, or start value, so you always see the real result.

Angle-based color stops

Place each color at an exact degree around the circle, with support for transparent stops and clean pie-slice edges.

Center and start control

Position the sweep origin anywhere and rotate the whole gradient with a single starting angle.

Repeating bands

One toggle turns a smooth sweep into evenly repeated segments for pinwheels, checker cones, and progress rings.

Copy-ready CSS

The output is a valid background declaration you can paste anywhere with no cleanup.

Private by design

Everything runs on your device. Nothing you build is uploaded or stored anywhere.

About this tool

A conic gradient sweeps colors around a center point instead of along a straight line. That circular sweep is what makes it the right tool for pie charts, color wheels, loading spinners, pinwheels, and progress rings that a linear or radial fill cannot produce cleanly.

This generator lets you build the effect by eye. Each color stop has a color and an angle, measured in degrees clockwise from the starting direction. Place two stops at the same angle to get a hard edge between slices, or spread them out for a smooth blend. You can move the center off the middle, rotate the whole sweep with a starting angle, and add as many stops as you need, with a two-stop minimum so the result is always a real gradient.

The repeating option divides the sweep into equal bands that tile around the circle, which is the fastest way to make striped cones and radial checker patterns. Transparent stops are supported too, so you can layer a conic sweep over other backgrounds.

The output is a plain CSS background declaration, ready to paste into any stylesheet. When you want a different sweep shape, try the radial gradient generator or the linear gradient generator, and for angle math the angle converter is handy.

Frequently asked questions

What is a conic gradient?
It is a gradient whose colors rotate around a center point, sweeping clockwise like the hands of a clock. This makes it ideal for pie charts, color wheels, and progress rings, unlike linear or radial gradients.
How do I make hard pie-slice edges?
Give two neighboring color stops the same angle. When two stops share a position the colors switch instantly with no blend, producing a crisp edge between slices.
What does the repeating option do?
It divides your color sweep into equal bands and tiles them around the full circle. It is the quickest way to build striped cones, pinwheels, and radial checker patterns.
Can I use transparent colors?
Yes. Set a stop to a fully or partly transparent color and the sweep will let the background behind it show through at that angle.
Is my work uploaded anywhere?
No. The preview and CSS are generated entirely on your device. Nothing you create is sent to a server, stored, or shared.

Related tools