CSS Gradient Generator

Written byOleh Soloninupdated 5 October 2026

Start colour

End colour

Angle, degrees

Gradient type

Result

Gradient preview
CSS
background: linear-gradient(135deg, #6d5efc 0%, #22d3ee 100%);
With a midpoint stop
background: linear-gradient(135deg, #6d5efc, #3f86f6, #22d3ee);
Solid fallbackbackground: #4899f5;
Midpoint colour#4899f5
Start in RGBrgb(109, 94, 252)
End in RGBrgb(34, 211, 238)

Three gradient types and a fallback

Ready CSS for linear, radial and conic gradients, with a midpoint stop and a solid fallback colour.

A gradient is one line of CSS, but the angle convention and stop order are easy to forget and the result has to be seen to be judged. Here the rule and the midpoint colour appear together.

The three-stop variant is the useful part. A transition between two distant colours often looks muddy in the middle, because interpolation happens in sRGB. An explicit midpoint lets that stretch be corrected.

How to use

Set two colours, an angle and a type — linear, radial or conic.
Copy the main CSS line, or the three-stop version if the middle comes out dull.
Put the solid-colour line before the gradient: it applies wherever the gradient is not supported.

Why the middle of a gradient goes dull

By default the browser blends in sRGB, simply averaging the channels. Between similar colours that goes unnoticed; between opposite ones the middle sinks to grey — between blue and yellow lies #808080.

The three-stop version fixes that by working the middle out on the colour wheel: the hue travels the short way round and the saturation is kept. Until recently the generator put the same channel average in the middle, which pinned the grey in place instead of removing it.

Every row comes from the generator on this page. For close colours, as in the first row, the difference is slight; for opposite ones it is the difference between a vivid middle and a muddy one.
From and to	Default middle	Middle in the three-stop version
#6d5efc → #22d3ee	#4899f5	#3f86f6
#0000ff → #ffff00	#808080 — grey	#00ff80
#ff0000 → #00ff00	#808000 — olive	#ffff00

The angle is not counted the way you expect

CSS measures a gradient's angle from "up", clockwise. Mathematics measures from the x-axis, anticlockwise. That is why a first attempt almost always lands a quarter turn out.

One value is worth remembering: 90deg points right, not up. If you would rather not calculate, write the direction out — to right is the same as 90deg and reads better six months later.

All three rows come from the generator on this page. A radial gradient has no angle, since it spreads from the centre; for a conic one the angle sets where the sweep begins.
Type	What the generator writes by default
linear	linear-gradient(135deg, #6d5efc 0%, #22d3ee 100%)
radial	radial-gradient(circle, #6d5efc 0%, #22d3ee 100%)
conic	conic-gradient(from 135deg, #6d5efc, #22d3ee)

What this calculator shows

A ready CSS rule for the gradient type you chose
A three-stop variant and a solid fallback colour
Both colours in RGB and the colour at the midpoint

What to keep in mind

CSS angles run clockwise from upward: 0deg goes bottom to top and 90deg left to right.
Conic gradients work in all current browsers, but a solid fallback is still worth keeping for older ones.

FAQs

How are CSS gradient angles measured?

Clockwise from upward. 0deg runs bottom to top, 90deg left to right, 180deg top to bottom — different from the mathematical convention, which is why a first attempt is often a quarter turn out.

Why does the middle of a gradient look muddy?

Browsers interpolate in sRGB, and the path between opposite colours passes through desaturated shades — between blue and yellow it is pure grey, #808080. A midpoint taken from the colour wheel fixes it, and that is what the three-stop version supplies.

How does the "middle colour" differ from the three-stop middle?

The middle colour is what the browser shows at the centre on its own, unprompted; it is also the solid fallback. The three-stop middle is taken from the colour wheel and stays saturated. For close colours they nearly coincide; for opposite ones they do not.

How does conic differ from radial?

Radial spreads outward in rings from a centre; conic sweeps around it like a clock hand. Conic is what pie charts and progress rings want.

Is a fallback colour necessary?

Useful for very old browsers and for email clients, where gradients often fail entirely. One extra line stops the background rendering as nothing.

Why does a 45-degree gradient miss the corner?

Because an angle and a corner are different things. 45deg always points at 45 degrees, while to top right adapts to the box's proportions: under the CSS “magic corners” rule the gradient's midline runs through the other two corners, top left and bottom right, and the final colour lands exactly on the top right corner. The gradient axis itself does not point at that corner. The two coincide only on a square.

Worked example

Violet into cyan

Input: #6d5efc → #22d3ee at 135°

Output: linear-gradient(135deg, #6d5efc 0%, #22d3ee 100%)

Note: The midpoint colour is #4899f5. If the middle looks muddy, drop that in as a third stop and adjust it by hand.

Useful links

All tools in Dev Tools

CSS Gradient Generator

Result

Related tools

Color Converter (HEX, RGB, HSL)

Colour Contrast Checker

HTML Entities Encoder

Useful links