Gradient Generator
Pick two colors and an angle to create a CSS linear gradient, preview it, and copy the CSS.
Your input stays in your browser. Nothing is uploaded.
About this tool
The output is background: linear-gradient(angle, color1, color2). In CSS, 0deg points upward (from bottom to top), 90deg goes from left to right, and 180deg goes from top to bottom. Two stops are spread evenly; add more stops or positions by editing the copied CSS. Gradients drawn between very different hues can look grey in the middle; picking colors close in hue avoids that.
How to use it
- Choose the start and end colors.
- Set the angle in degrees.
- Copy the CSS into your stylesheet.
Examples
Left to right
linear-gradient(90deg, #3525cd, #ffffff) fades from purple on the left to white on the right.
Top to bottom
180deg starts with the first color at the top.
FAQ
Can I add a third color?
Not in the controls. Add it in the copied CSS, for example linear-gradient(90deg, red, yellow, green).
Do gradients work in all browsers?
Unprefixed linear-gradient() is supported by all current browsers.
Is anything uploaded?
No.