Live wheel & pie preview

CSS Conic Gradient Generator

Add color stops, set the start angle and shape, and copy the finished conic-gradient CSS.

CSS

How it works

1

Add your color stops

Click "Add color stop" to add colors, pick each stop's color, and set its position from 0 to 100%.

2

Set angle and shape

Drag the from-angle slider to rotate the gradient, and switch between a round wheel or a square swatch preview.

3

Copy the CSS

Copy the generated conic-gradient() declaration and paste it into any background property in your stylesheet.

FAQ

What is a conic gradient used for?

Conic gradients rotate colors around a center point, which makes them ideal for color wheels, pie-chart style graphics, loading spinners and angled decorative backgrounds.

Is my gradient data uploaded anywhere?

No. The preview and CSS are generated entirely with JavaScript running in your browser. Nothing you enter is sent to a server.

Which browsers support conic-gradient?

All current versions of Chrome, Edge, Firefox and Safari support the CSS conic-gradient() function, so the generated code works without prefixes in modern browsers.

Try other tools

GRADCSS Gradient GeneratorBuild linear and radial gradients. DIAGCSS Diagonal Section Divider GeneratorCreate angled section breaks. MESHMesh Gradient GeneratorGenerate soft multi-color mesh backgrounds.