How do you make a donut chart from a conic gradient?

By positioning a centered pseudo-element (`::after`) with a circular border-radius and background matching the parent page, masking the center of the pie into a ring.

Updated: August 2026 • Verified v1.2

CSS Conic Gradient Pie Chart & Color Wheel Generator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

CSS Degree Distribution: conic-gradient(Color1 0% Pct1%, Color2 Pct1% Pct2%, ...)

Was this calculation helpful?

Understanding Your Results

Calculates exact degree and percentage color stops for multiple chart slices, renders an interactive circular canvas with adjustable donut hole, and outputs clean copyable CSS.

Practical Guidance & Next Steps

Pure CSS `conic-gradient` renders in zero milliseconds with zero third-party JavaScript dependencies.

What is this?

A visual styling utility that builds pure CSS pie charts and donut progress rings using the modern conic-gradient property.

How does it work?

1. Add or edit chart slices, color pickers, and percentage values. 2. Adjust the donut hole slider for ring charts. 3. Copy the production CSS snippet in 1 click.