Conic Gradient Generator

Build CSS conic-gradient() backgrounds with a live circular preview. Set the starting angle, add and reorder color stops, toggle repeating mode, and switch between circular and square preview. Copy the ready-to-paste CSS. Pairs with the CSS Gradient and Border Radius generators. Everything runs locally in your browser.

square shape repeating

Angle

From angle0°

Origin

Color stops

A conic gradient sweeps color around a center point like a pie chart. The from angle rotates the starting position; stops are positioned from 0% (top) clockwise to 100%. Repeating conic gradients tile the stop pattern. Pairs with the CSS Gradient Generator. Runs locally.