CSS Gradient Generator
Visually create beautiful CSS gradients. Supports linear, radial, and conic gradient types with multiple color stops.
Gradient Type
Color Stops
How to Create CSS Gradients Online
- 1. Choose a gradient type: Linear, Radial, or Conic.
- 2. Adjust the angle (for linear/conic gradients) using the slider.
- 3. Add, remove, or modify color stops. Set color values and position percentages.
- 4. Use a preset for quick starts, or build your gradient from scratch. Click Copy CSS to use in your project.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear gradients transition colors along a straight line at a specified angle. Radial gradients radiate outward from a center point in a circular or elliptical shape. Conic gradients rotate colors around a center point, like a color wheel.
How many color stops can I add?
You can add as many color stops as you need. Each stop has a color and a position percentage (0-100%). At minimum, two color stops are required to create a gradient.
Can I use these gradients in all browsers?
Yes. CSS gradients with the standard syntax (linear-gradient, radial-gradient, conic-gradient) are supported in all modern browsers. Conic gradients may not work in very old browsers.
How do I add a gradient to my website?
Copy the generated CSS code and add it to your element's style. You can use it as a background property in CSS. For example: .my-element { background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); }