Gradient Generator

The tool supports three CSS gradient types: linear (color transitions along a straight line at any angle), radial (circular or elliptical gradients emanating from a center point), and conic (color transitions around a center point, like a color wheel). Each type is fully customizable with multiple color stops.

Click anywhere on the gradient bar to add a new color stop. Each stop has its own color picker and position slider (0-100%). You can add as many stops as needed. Drag stops to reposition them or click to select and change their color. Double-click a stop to remove it.

For linear gradients, use the angle slider (0-360 degrees) or click the directional presets (to top, to right, to bottom-left, etc.). For radial gradients, set the center position and shape (circle or ellipse). For conic gradients, adjust the starting angle.

The generated CSS code appears below the preview and updates in real time as you make changes. Click the copy button to copy the complete CSS property (e.g., background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)) to your clipboard, ready to paste into your stylesheet.

Yes — the generator outputs standard CSS gradient syntax supported by all modern browsers (Chrome, Firefox, Safari, Edge). Linear and radial gradients have over 97% browser support. The tool also provides vendor-prefixed versions (-webkit-) for older browser compatibility if needed.