What is the difference between linear, radial and conic?

Linear moves along a straight angle, radial expands outward from a center point, and conic sweeps around a center point like a colour wheel.

How many colour stops can I add?

Up to ten stops, each with its own colour and position.

Gradient Generator

Pick colours, a direction or angle, and any number of colour stops to build a linear, radial or conic gradient. Watch the preview update live, then copy the CSS declaration.

Angle90°

Angle

Color Stops

Color 1

Color stop 1

Position 1

Color 2

Color stop 2

Position 2

100%

Presets

CSS

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

How to use

Choose a gradient type and add colour stops.
Adjust the angle and stop positions.
Copy the generated CSS.

Frequently asked questions

What is the difference between linear, radial and conic?: Linear moves along a straight angle, radial expands outward from a center point, and conic sweeps around a center point like a colour wheel.
How many colour stops can I add?: Up to ten stops, each with its own colour and position.

Privacy

Gradients are generated in your browser and are never sent to a server.

Related tools

Color Converter
Convert HEX, RGB, and HSL color values instantly. Preview the color and copy CSS-ready codes from a free browser-based color converter.
Color Palette Generator
Generate a coordinated colour palette from a base colour and a harmony rule such as complementary or triadic. Copy any swatch as HEX.
Box Shadow Generator
Build a CSS box-shadow with live preview. Stack multiple shadow layers, adjust offset, blur, spread and colour, then copy the CSS.