CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Copy CSS code instantly.
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Preset Gradients
How to Use This CSS Gradient Generator
Create beautiful CSS gradients visually and copy the generated code directly into your stylesheets. Everything runs in your browser with real-time preview.
- Choose a gradient type: Linear, Radial, or Conic
- Adjust the angle using the slider (for linear and conic gradients)
- Set your color stops by picking colors and adjusting their positions
- Add up to 5 color stops or remove extra ones
- Click a preset gradient to load it as a starting point
- Copy the generated CSS code and paste it into your project
FAQ
What is the difference between linear, radial, and conic gradients?
A linear gradient transitions colors along a straight line at a specified angle. A radial gradient radiates outward from a center point in a circular or elliptical shape. A conic gradient rotates colors around a center point like a color wheel.
What are color stops?
Color stops define specific colors at specific positions along the gradient. The browser smoothly interpolates between the stops to create the gradient effect. You need at least 2 stops to create a gradient.
Are CSS gradients supported in all browsers?
Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. No vendor prefixes are needed for modern browsers.
Can I use gradients with transparency?
Yes. While this tool uses HEX colors, you can manually edit the generated CSS to use rgba() or hsla() values with alpha channels for transparency effects.