Quick Answer
What gradient types are supported? Linear (straight line), radial (from center outward), and conic (rotating around a point). Click on the gradient bar to add color stops, then copy the generated CSS code.
Frequently Asked Questions
Linear gradients transition colors along a straight line at any angle. Radial gradients emanate from a center point outward in a circle or ellipse. Conic gradients rotate colors around a center point like a color wheel. Each type is suited for different design effects.
Click anywhere on the gradient bar to add a new color stop. Drag stops to reposition them, or click a stop to change its color. You can add as many stops as you need. To remove a stop, drag it off the gradient bar or click the delete button.
Linear and radial gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge) and IE10+. Conic gradients work in Chrome, Edge, Safari, and Firefox 83+. The exported code includes vendor prefixes for maximum compatibility.
Yes — besides copying the CSS code, you can export the gradient as a PNG or SVG image. This is useful for email templates, social media graphics, or applications where CSS gradients are not supported.
Banding occurs when colors are too similar or the transition is too gradual. Add intermediate color stops between your main colors, use colors that are not too close in hue, and avoid very long gradient distances. The tool shows a preview so you can spot banding issues.
Yes — use the color picker to set any color stop to transparent (alpha = 0) or semi-transparent. This creates fade effects where the background shows through. Useful for overlays, text backgrounds, and image effects.