About CSS Gradient Generator
Create beautiful CSS gradients visually. Choose linear or radial, set the angle, add as many colour stops as you like, watch the live preview, and copy the ready-to-use CSS.
How to Use
- Pick a linear or radial gradient.
- Set the angle (for linear) and drag the colour-stop sliders.
- Add or remove colours and pick each colour.
- Copy the generated CSS into your stylesheet.
Why Use This Tool?
- Accurate — built on precise, well-tested mathematical formulas.
- Instant — all calculations happen client-side for zero latency.
- Private — no data is sent to any server; your information stays on your device.
- Free — no sign-up, no limits, no hidden costs.
Frequently Asked Questions
What is the difference between a linear and radial gradient?
A linear gradient blends colours along a straight line in a direction you set with the angle. A radial gradient blends outward from a centre point in a circle or ellipse.
How do colour stops work?
Each stop is a colour placed at a percentage position along the gradient (0% to 100%). The browser smoothly blends between them. Add more stops for multi-colour gradients.
Does the CSS work in all browsers?
Yes — linear-gradient and radial-gradient are supported by all modern browsers with no prefix needed. Just paste the generated value as a background.
Is the gradient free to use?
Yes, the CSS this tool generates is yours to use in any personal or commercial project with no attribution.