Random Gradient Generator

What this generator does

Gives you a gradient with a controlled path between its colours, rather than two random colours and whatever happens in between. The hue spread control is the important one: it decides whether the gradient stays within a family or travels halfway round the wheel.

How to use this tool

1. Choose how many colour stops you want.
2. Set how far round the colour wheel the gradient should travel.
3. Adjust saturation and lightness to taste.
4. Press Generate gradient, then copy the CSS.

Understanding the controls

Colour stops

Two gives a simple fade. Three or more give the gradient shape and let it change direction, which is what makes a background feel designed rather than defaulted.

Hue spread

How far round the wheel the gradient travels from first stop to last. Under about 60° stays in one colour family; 180° reaches the complement and gives the boldest result.

Saturation

Held constant across the stops, which is precisely what keeps the middle from going grey. This is the control that most affects whether a gradient looks fresh or washed out.

Lightness

The midpoint. The gradient drifts slightly either side of it across the run, so the result has depth rather than only changing hue.

Worked examples

A 60° spread

Stays within one colour family — a subtle background that does not compete with content.

A 180° spread

Travels to the complement, giving the boldest and most attention-grabbing result.

The CSS

linear-gradient(120deg, #2E7BC4 0%, #45C48C 50%, #B8C43A 100%)

Common use cases

• A hero-section or card background for a website
• A slide or poster backdrop that is not a flat colour
• Placeholder artwork while real imagery is commissioned
• An app splash screen or onboarding background
• Exploring colour combinations you would not have chosen deliberately

How this generator works

Stops are placed evenly from 0% to 100%, and each stop's hue advances a fixed share of the spread while saturation stays constant and lightness drifts gently. Interpolating in HSL rather than RGB is the whole point: a straight RGB blend between two saturated colours passes through a desaturated middle — blue to yellow goes through grey — which is the muddy gradient everyone recognises. Keeping saturation fixed and moving hue avoids it entirely.

Randomness and fairness

The starting hue, the angle and — unless you set them — the saturation, lightness and spread are drawn at random. The path between stops is not random at all: it is even interpolation, which is what makes the result a gradient rather than a set of unrelated colours.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

• Only linear gradients are produced. Radial and conic gradients use different CSS and are not covered here.
• The angle is randomised with the colours rather than being a control, so change it in the copied CSS if you need a specific direction.
• Text over a gradient has variable contrast by definition, since the background changes underneath it. Check the worst point with the contrast pair generator rather than the average.
• Very wide hue spreads over few stops can produce a band of colour in the middle that neither end predicts — add a stop to control the path.

Common mistakes

Putting body text directly over a bold gradient

Contrast varies across the gradient, so text readable at one end may fail at the other. Add a solid or semi-transparent layer behind the text.

Using a very wide hue spread for a background

A gradient that travels 300° round the wheel draws attention to itself. Under 90° is usually right for anything behind content.

Practical tips

• Generate several and keep the ones that still look good at low saturation — those are the ones that will work behind content.
• Paste the CSS and then adjust only the angle; the colour relationships are the part worth keeping.

Privacy and your data

Everything is generated in your browser. Nothing is uploaded, stored, or written into the page address, so a gradient exists only in the tab until you copy the CSS. Analytics records the number of stops and nothing about the colours.

Frequently asked questions

Why do some gradients look muddy?

Because interpolating in RGB passes through a desaturated middle. This tool interpolates hue in HSL with saturation held constant, which avoids it.

Can I use this for a CSS background?

Yes — the CSS shown is a complete linear-gradient value, ready to paste.

How many stops should I use?

Two for a simple fade, three for shape. More than four rarely improves a background.