Gradient guide
About this linear gradient generator
Create a linear CSS gradient
A linear gradient blends colours along one straight axis. Use the angle control to rotate that axis, add as many colour stops as the design needs, and place each stop precisely from 0% to 100%.
The preview and code update together, so the CSS you copy matches the visible result.
Choose the right gradient angle
Use 0° for a bottom-to-top blend, 90° for left to right, 180° for top to bottom and 270° for right to left. Diagonal values such as 120° or 135° often feel more dynamic on cards and page backgrounds.
Export or use the CSS
Copy the result as CSS, HTML or React, or download it as a full-resolution PNG, JPG or scalable SVG. Raster export is useful for presentation backgrounds, while SVG and CSS remain sharp at different sizes.
Frequently asked questions
What is a linear gradient?
A linear gradient blends two or more colours along a straight line defined by an angle or direction.
Can a linear gradient have more than two colours?
Yes. Add extra colour stops and set the position and opacity of each one independently.
Can I download the gradient as an image?
Yes. Choose a canvas ratio and download the result as a full-size PNG, JPG or scalable SVG.