CSS Gradient Generator

Start colour

End colour

Angle, degrees

Gradient type

Result

Gradient preview
CSSbackground: linear-gradient(135deg, #6d5efc 0%, #22d3ee 100%);
With a midpoint stopbackground: linear-gradient(135deg, #6d5efc, #4899f5, #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.

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.

Why does the middle of a gradient look muddy?

Browsers interpolate in sRGB, which passes through desaturated shades in the middle. An explicit midpoint stop, or the newer oklch colour space, fixes it.

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.

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