Gradient Generator
Build multi-stop linear gradients with angle control and live preview — CSS ready.
Loading tool…
About this tool
Linear gradients need several color stops at precise positions to look right, and hand-writing the CSS is error-prone. This generator gives you a visual editor: add stops, drag their positions, set the angle, and watch the preview update.
When it looks right, copy the finished linear-gradient() declaration straight into your stylesheet.
How to use
- Add color stops and set each stop's color and position.
- Set the gradient angle in degrees.
- Preview the result live.
- Click Copy to grab the CSS.
Frequently asked questions
As many as you like — two minimum. Each stop gets a color and a 0–100% position along the gradient.
0deg points the gradient upward, 90deg points it right, 180deg downward, and 270deg left — following the CSS linear-gradient() convention.
Yes. Give two stops the same position percentage and the transition between them becomes instant instead of blended.
Related tools
Color Palette Generator
Enter a base color to generate complementary, analogous, triadic, and more palettes.