CSS Gradient Generator

Build linear, radial and conic gradients with live preview.

Gradient type

Angle135°

0° points upward and angles increase clockwise.

Colour stops

Colour 1

Position0%

Colour 2

Position100%

CSScss

background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);

Gradient textcss

background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

CSS gradient angles start at 0° pointing up and increase clockwise, so 90° runs left to right — the opposite of the mathematical convention, which trips people up constantly.

What does CSS Gradient Generator do?

Design CSS gradients visually with as many colour stops as you need. Linear, radial and conic types are supported, with control over angle, position and stop placement, and the CSS is generated as you go.

How to Use CSS Gradient Generator

1
Choose a gradient typeLinear is the most common.
2
Set your coloursAdd stops and drag them into position.
3
Adjust the angleOr the centre point for radial and conic.
4
Copy the CSSPaste it straight into your stylesheet.

Key Features

Linear, radial and conic gradient types
Unlimited colour stops with draggable positions
Angle control for linear, and shape and position for radial
Full-width live preview
Copy-ready CSS, including a gradient-text variant
Random gradient button and a set of curated presets

Frequently Asked Questions

How do CSS gradient angles work?

0deg points upward and angles increase clockwise, so 90deg goes left to right and 180deg goes top to bottom. This differs from the mathematical convention, which is a common source of confusion.

Why does my gradient look muddy in the middle?

Because interpolation happens in sRGB, so blending complementary colours passes through grey. Adding an intermediate stop of a colour you actually want fixes it. Modern CSS also allows interpolation in oklab, which avoids the problem.

How do I apply a gradient to text?

Set the gradient as background, then background-clip: text with a transparent text colour. The generator produces that snippet ready to copy.

What is a conic gradient for?

Colours sweeping around a centre point rather than radiating outward. It is what makes pie charts, colour wheels and progress rings possible in pure CSS.

Runs in your browser

Everything is generated in your browser. Nothing is sent to a server, so results are private and the tool keeps working offline.

How the rest of the site handles data