CSS Gradient Generator
Create beautiful CSS gradients. Linear and radial with live preview.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Report a Problem
Found a bug or have a suggestion? Help us improve this tool.
What is this tool?
CSS gradient generator creates linear and radial gradient backgrounds with visual preview. It generates production-ready CSS code for linear-gradient() and radial-gradient() functions. Supports multiple color stops, angles, and transparency. Essential for modern web design.
How to use
- 1
Add colors
Click to add color stops to the gradient.
- 2
Adjust settings
Set angle, type (linear/radial), and positions.
- 3
Copy CSS
Get the generated CSS code.
Frequently Asked Questions
What is a CSS linear gradient?
A linear gradient transitions smoothly between two or more colors along a straight line. Syntax: background: linear-gradient(angle, color1, color2, ...). Common angles: 0° (bottom to top), 90° (left to right), 180° (top to bottom).
Can I use it in CSS?
Yes, generates standard CSS gradient code.
Can I set the position of each color stop?
Yes. Each color stop has a position field from 0 to 100 (percent). You can add or remove stops as needed, with a minimum of two stops. The generated CSS always includes the position of each stop.