CSS Gradient Generator

What are CSS gradients?

CSS gradients let you display smooth transitions between two or more colours without using images. They are rendered by the browser, scale perfectly at any resolution, and cost zero extra HTTP requests. The three gradient functions available in CSS are linear-gradient(), radial-gradient(), and conic-gradient().

Linear, radial and conic

A linear gradient transitions colours along a straight line defined by an angle. Radial gradients radiate outward from a centre point in an elliptical or circular shape. Conic gradients sweep colour around a centre point, like the hands of a clock -- useful for pie-chart effects and colour wheels.

Colour stops

Each colour stop defines a colour and its position along the gradient line. You can use any CSS colour format including rgba for transparency. Adding more stops lets you build complex, multi-colour gradients. The position percentage controls where each colour begins its transition.

Privacy

This tool runs entirely in your browser. No data is sent to any server.