CSS conic-gradient Builder

Build a CSS conic-gradient — useful for pie charts and dials.

ColorStop %
background: conic-gradient(#3b82f6 0%, #10b981 33%, #f59e0b 66%, #ef4444 100%);

About this tool

Define color stops and an optional start angle. The tool composes a CSS conic-gradient() that you can drop into any background property.

An unhandled error has occurred. Reload ×