CSS gradients at your fingertips
Gradients are one of the most versatile tools in CSS — they replace flat backgrounds with smooth colour transitions that add depth, emphasis, and visual interest to any interface. The three gradient types each serve a different purpose: linear gradients flow in a straight line along any angle, radial gradients emanate from a center point in a circular pattern, and conic gradients sweep around a center like a colour wheel.
This generator lets you build any of the three types with live visual feedback. Add, remove, and reorder colour stops, set positions with a slider, and adjust the angle for linear and conic gradients. The preview updates in real time so you can iterate until the result looks exactly right.
How colour stops work
A gradient transitions between colour stops placed along the gradient line (or around the circle for conic). Each stop has a colour and a position percentage. Closer stops transition faster; stops at the same position create a hard edge. At least two stops are required, and you can add up to eight to create complex multi-colour gradients.