About Gradient Generator
Gradient Generator produces a ready-to-paste CSS declaration for a linear gradient between two colors at an angle you choose. Fill in the start color, the end color and an angle in degrees, and it returns a line such as background: linear-gradient(135deg, #6366f1, #ec4899); that can be dropped straight into a style rule.
The tool is a formatter rather than a renderer: it does not parse or normalise the two colors, it simply places them into the declaration in the order you supplied. That means whatever the color inputs hand back is exactly what you get, and swapping the two swatches reverses the direction of the gradient while leaving the angle untouched.
The angle follows the CSS convention, where 0 degrees points upward and the value increases clockwise. Because the output is a lone declaration rather than a complete rule, you still supply the selector and the element yourself — the tool's job is only to remove the guesswork from the syntax.
How to use Gradient Generator
- 1 Pick the starting color in the From swatch and the ending color in the To swatch.
- 2 Set the angle in degrees — 0 points up and the value increases clockwise.
- 3 Copy the generated background: declaration into your stylesheet under the selector of your choice.
Frequently asked questions
Which direction does the angle point?
In CSS, 0 degrees points upward and the angle increases clockwise, so 90 degrees runs left to right and 180 degrees runs top to bottom. The tool passes your number through unchanged.
Can I add a third color stop?
No. This generator works with exactly two stops, the start and the end. For a multi-stop gradient you would extend the generated declaration by hand.
Do the colors get validated?
Not beyond what the color inputs already enforce. The tool inserts the swatch values verbatim into the declaration, trusting the picker rather than re-parsing the strings.
Will the output work in every browser?
Yes. linear-gradient() is universally supported in current browsers, and the declaration uses the modern unprefixed syntax with no vendor prefixes.
Free, online, and private
Free to use
Gradient Generator is completely free. There is no account to create, no login, and no hidden charge or usage limit.
Runs online in your browser
It is a free online tool that runs entirely in your browser. Nothing to download or install — open the page and start using it right away.
Your data stays private
All processing happens locally on your device. Your input is never uploaded, stored, or tracked, so it never leaves your browser.
How Gradient Generator behaves in detail
These are the specifics of this implementation — the exact ranges, defaults and fixed settings you are working with.
| Parameter | Value |
|---|---|
| Output syntax | a single declaration — background: linear-gradient(<angle>deg, <from>, <to>); |
| Colour stops | exactly two, written in the order given and with no positions or percentages attached |
| Angle field | 0 to 360 degrees, default 135 |
| Angle direction | emitted unchanged as the CSS gradient angle: 0deg runs bottom to top, 90deg left to right, and the 135deg default runs from the top-left corner toward the bottom-right |
| Colours | two native swatches, defaulting to #6366f1 and #ec4899, always written as 6-digit hex |
Compiled from the implementation of this tool and checked against it by itoolnet.
What Gradient Generator does not do
Knowing the edges of a tool saves more time than another list of its features. These are the cases where it will not do what you might expect.
- Exactly two stops. Adding a third colour, placing a stop at a percentage, or repeating a stop to make a hard band between the two colours are all impossible here — the ends are fixed at the start and the end of the gradient line.
- The angle is not clamped in the run function: the 0 to 360 bounds are attributes on the number input alone, so a value typed or pasted outside them lands in the declaration as written and is quietly taken modulo 360 by CSS.
- Only the linear form is generated, and only as a bare declaration. There is no repeating variant, no radial or conic option, no fallback background colour, and no preview graphic produced by the page itself.
Tested and documented by itoolnet, the team that builds and maintains this site.