How to build a CSS gradient in 3 steps
- Choose two or three colours — tick the third colour box for a three-stop gradient.
- Set the angle — drag the slider and watch the preview turn in real time.
- Click the CSS to copy it — paste it straight into your stylesheet or style attribute.
Gradients that look designed, not defaulted
A linear gradient blends one colour into another along a straight line. The classic mistakes are picking colours from opposite ends of the rainbow (the blend turns muddy grey in the middle) and using pure rainbow stops. The reliable recipes: blend two shades of the same hue family for a subtle, professional background; add a third colour when the two-colour blend has a dull middle; and match the angle to the light in your design — 135° (top-left to bottom-right) suits most screens because it mimics natural light. If you need a starting pair, generate a palette first with the Loona Palette Generator and paste its HEX codes here.
How it works
The generator writes the standard CSS linear-gradient() function for you. Colour stops are spaced evenly: with two colours they sit at 0% and 100%; with three, at 0%, 50% and 100%. The angle uses the CSS convention — 0deg points upward, 90deg to the right, 180deg downward, 270deg to the left — and the browser itself renders the blend, so the preview you see is exactly what the copied code produces. No code leaves your device; the CSS is assembled in your browser.
Worked example
Choose red #ff0000 and blue #0000ff at 90 degrees and the output is background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); — the blend runs left (0deg would run upward) to right, starting pure red and ending pure blue. Add a middle colour, say gold #d4a017, and it is placed at 50%: linear-gradient(90deg, #ff0000 0%, #d4a017 50%, #0000ff 100%).
Frequently asked questions
Is this gradient generator free?
Yes — free with no signup, and the CSS it produces is yours to use anywhere, including commercial projects.
What is the difference between 0deg and 180deg?
They run the same blend in opposite directions: 0deg starts the first colour at the bottom and blends upward; 180deg starts it at the top and blends downward. Swap the angle by 180 to reverse any gradient.
Can I make a radial gradient?
This tool builds linear gradients, which cover most web design needs. For a radial version, generate the colours here, then change the function name in your CSS to radial-gradient with the same colour stops.
Why does my two-colour blend look grey in the middle?
Colours opposite each other on the wheel cancel out mid-blend. Add a third colour between them (tick Colour 3) that bridges the two hues, and the muddy band disappears.
Will the gradient work in all browsers?
Yes — linear-gradient has been supported by every modern browser for over a decade, with no prefixes needed. The preview uses the same CSS, so what you see is what you get.
More free photo tools
Compress photos to an exact KB size — 50KB, 100KB, 200KB.
Resize by pixels, cm or inches, with a print DPI setting.
Free crop plus ready ratios — 1:1, 4:3, passport and more.
Convert JPG, PNG and WebP both ways, with quality control.
Fix brightness, contrast and sharpness in seconds.
Turn a photo background white, blue or light grey.
Turn one or more photos into a single PDF file.
Add a text watermark — set size, colour, opacity, position or tile it.
Pick any colour and copy its HEX, RGB, HSL and HSV values.
Harmonious colour palettes from any base colour, in one click.
Check text and background colours against WCAG AA and AAA.