Prism Conic

Prism Conic is the only conic gradient in the catalog, cycling through red, amber, green, and blue around a full turn. Conic gradients radiate from a point like a slice, which makes them perfect for color wheels, loading spinners, award badges, and any layout built around a central element. They are harder to use as page backgrounds because the hue changes every few degrees, so text placement becomes nearly impossible.

Use Prism Conic in circular masks, ring progress indicators, or the gradient edge of a donut chart where the changing hues carry meaning. When it appears in a flat background, blur it in the design tool or add a strong dark overlay behind any text. The default rotation starts the red stop at the top; rotating the start by 90 degrees lets you place the color you want at twelve o'clock on your component.

Conic gradients read best in round components because the hue wraps the whole circle. For a ring progress indicator, keep the conic on an outer ring, put a solid neutral inside, and rotate the start so red opens at the top, which is the conventional position for progress. When you do need it flat, blur it in the design tool or drop the opacity so the rainbow stays a backdrop rather than a surface. The five stops return to the first hue at the end, which closes the circle without a hard seam.