What makes a good gradient?

Good gradients use analogous or complementary colors (close hues or opposite hues), avoid pure black or white as endpoints unless deliberately minimalist, and have smooth transitions. Generally 2–4 stops is enough. More can look muddy.

How do I create a diagonal gradient?

Set the gradient type to linear and the angle to 45deg (bottom-left to top-right) or 135deg (top-left to bottom-right). In your own CSS you can also use the keyword 'to bottom right'.

Can I use a conic gradient as a color wheel?

Yes. A conic gradient sweeping from 0deg to 360deg covering all hues creates a color wheel. Use: conic-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%)).

Why does my gradient look grey in the middle?

The stops here are hex colors, and browsers blend hex stops in sRGB, so two opposite hues such as blue and yellow pass through a dull grey midpoint. Add a third stop with an in-between hue, or choose stops that sit closer together on the color wheel.

Gradient color generator

Create beautiful color gradients for CSS, design mockups, or UI components. Add color stops, adjust positions, switch between linear, radial, and conic types, and copy the complete CSS value instantly. The live preview updates with every change. 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 makes a good gradient?: Good gradients use analogous or complementary colors (close hues or opposite hues), avoid pure black or white as endpoints unless deliberately minimalist, and have smooth transitions. Generally 2–4 stops is enough. More can look muddy.
How do I create a diagonal gradient?: Set the gradient type to linear and the angle to 45deg (bottom-left to top-right) or 135deg (top-left to bottom-right). In your own CSS you can also use the keyword 'to bottom right'.
Can I use a conic gradient as a color wheel?: Yes. A conic gradient sweeping from 0deg to 360deg covering all hues creates a color wheel. Use: conic-gradient(hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%)).
Why does my gradient look grey in the middle?: The stops here are hex colors, and browsers blend hex stops in sRGB, so two opposite hues such as blue and yellow pass through a dull grey midpoint. Add a third stop with an in-between hue, or choose stops that sit closer together on the color wheel.

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