CSS Gradient Generator

Create linear, radial and conic CSS gradients with up to three colours and copy the code.

How do you make a gradient in CSS?

A CSS gradient is a smooth transition between colours created with the linear-gradient(), radial-gradient() or conic-gradient() functions, used as a background without any image file.

Gradient types

Linear — colours change along a straight line at an angle (90° = left to right, 180° = top to bottom).
Radial — colours spread out from the centre in a circle.
Conic — colours rotate around the centre, like a colour wheel or pie chart.

Example

background: #00bf63;
background: linear-gradient(135deg, #00bf63 0%, #2f6bff 100%);

The first line is a solid fallback colour for very old browsers. Gradients are rendered by the browser, so they stay sharp at any size and add no download weight.

Frequently asked questions

Can I use a gradient as text colour?

Yes: use background-clip: text with color: transparent on the text element.

How many colours can a gradient have?

CSS supports any number; this generator offers up to three for clean results.

Do gradients work in all browsers?

Linear and radial gradients work everywhere; conic gradients work in all modern browsers.