What is a CSS linear gradient?

A CSS linear gradient creates a smooth transition between two or more colors along a straight line. The direction is set by an angle (0deg = bottom to top, 90deg = left to right). Syntax: linear-gradient(angle, color1 stop1, color2 stop2, ...).

How do I set the gradient angle?

Use the angle slider. 0deg goes from bottom to top, 90deg goes from left to right, 180deg goes from top to bottom, and 270deg goes from right to left. In your own CSS you can also use keywords like 'to right' or 'to bottom right'.

Can I add more than two color stops?

Yes. This generator supports 2 to 8 color stops. Each stop has a color and a position (0–100%). Click '+ Add' to add more colors. Stops are ordered by their position, and any stop can be removed with Remove while more than two remain.

Is my data sent to a server?

All calculations run locally in your browser. Our servers are not involved at any point.

CSS linear gradient generator

Build a CSS linear gradient visually. Set the direction angle, add up to 8 color stops, and position each stop precisely. The live preview updates in real time and you can copy the full CSS value with one click. All generation runs locally in your browser.

CSS

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

GRADIENT

Type

Angle: 135deg

0deg360deg

Color stops

#3b82f6

#8b5cf6

100%

How it works

The CSS gradient string is built from the selected type, angle, and color stops. For linear gradients: linear-gradient(Ndeg, color1 P1%, color2 P2%, ...). For radial: radial-gradient(circle, ...). For conic: conic-gradient(from Ndeg, ...). Color stops are sorted by position before the string is assembled. The string is applied directly as a CSS background property on the preview element. All processing runs in JavaScript in your browser.

Processing runs in your browser

All processing happens locally in your browser tab. Our servers are not involved at any point.

Related operations

For building a coordinated multi-colour set first, try the colour palette generator. To soften or deepen any stop value, use tints and shades. For converting your stop colours between formats, see the colour converter.

Frequently asked questions

What is a CSS linear gradient?: A CSS linear gradient creates a smooth transition between two or more colors along a straight line. The direction is set by an angle (0deg = bottom to top, 90deg = left to right). Syntax: linear-gradient(angle, color1 stop1, color2 stop2, ...).
How do I set the gradient angle?: Use the angle slider. 0deg goes from bottom to top, 90deg goes from left to right, 180deg goes from top to bottom, and 270deg goes from right to left. In your own CSS you can also use keywords like 'to right' or 'to bottom right'.
Can I add more than two color stops?: Yes. This generator supports 2 to 8 color stops. Each stop has a color and a position (0–100%). Click '+ Add' to add more colors. Stops are ordered by their position, and any stop can be removed with Remove while more than two remain.
Is my data sent to a server?: All calculations run locally in your browser. Our servers are not involved at any point.

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to color tools
Step by step: Build a color system for a design project