CSS Gradient Generator

Color stops in CSS gradients

Each stop is a color plus a position along the gradient line. Stops are sorted automatically, so you can add one at any percentage and it slots into the right place. Two stops at the same position create a hard edge — handy for stripes.

Conic gradients

A conic gradient sweeps around a center point instead of travelling in a line. It is the simplest way to build pie charts, colour wheels and progress rings in pure CSS.