What is a conic gradient?

A conic gradient is a CSS gradient where color transitions rotate around a center point rather than progressing in a straight line. The conic-gradient() function is supported in all modern browsers.

How do I set equal-sized pie slices?

Add N color stops and space them evenly (e.g. for 4 colors set positions at 0%, 25%, 50%, 75%, 100%). Use the hard-stop technique by repeating a position: color1 0% 25%, color2 25% 50%, etc.

What does the rotation angle do?

The from parameter rotates the starting point of the gradient clockwise. At 0° the gradient starts at the top (12 o'clock position).

Can I change the gradient center?

Yes. The at parameter lets you shift the center away from 50% 50%. Use the X and Y center controls to reposition it.

Is conic-gradient() supported in all browsers?

Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. They work in all modern browsers as of 2024.

How do I copy the CSS?

Click the "Copy CSS" button below the preview. The full background property value including the conic-gradient() call is copied to your clipboard.

Conic Gradient Generator

Name: Conic Gradient Generator
Availability: InStock
Author: Nham Vu

Build a CSS conic-gradient() with custom color stops and rotation angle, then copy the ready-to-paste CSS.

Rotation 0°

Center X 50%

Center Y 50%

Color Stops

Presets

Live Preview

Generated CSS

Tailwind Arbitrary Value

Summary

Build a CSS conic-gradient() with custom color stops and rotation angle, then copy the ready-to-paste CSS.

How it works

The tool starts with two color stops — adjust their colors and positions using the controls.
Click "Add Stop" to insert additional color stops between existing ones.
Drag the Rotation slider (0–360°) to rotate the entire gradient.
Set the center position (X% / Y%) to shift the gradient origin.
Watch the circular live preview update in real time.
Click "Copy CSS" to copy the generated conic-gradient() declaration to your clipboard.

Use cases

Create pie-chart-style backgrounds using pure CSS.
Design color wheels and circular data visualizations without images.
Build decorative accent rings or progress-ring backdrops.
Generate conic gradient overlays for hero sections.
Prototype multi-color starburst or angular sweep effects.
Explore CSS conic-gradient() syntax interactively.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu