CSS Gradient Generator — Free Online Linear & Radial Gradient Tool
Create beautiful linear, radial, or conic CSS gradients with live preview. Copy the CSS code directly into your project.
Frequently Asked Questions
Click the 'Copy CSS' button beneath the preview. The full background property is copied ready to paste into your stylesheet.
Yes. Click '+ Add Color' to insert more stops. Drag the position slider to control where each color appears in the gradient.
Linear gradients flow along a straight line at a chosen angle. Radial gradients radiate outward from a center point in an ellipse or circle.
A conic gradient rotates colors around a center point — useful for pie charts or color wheel effects.
CSS Gradient Types
- Linear: Color transitions along a straight line at a specified angle. Most common type.
- Radial: Color radiates outward from a central point in circular or elliptical patterns.
- Conic: Colors rotate around a center point, ideal for pie charts and color wheels.
Using Gradients in CSS
Apply the generated code as a background: background: linear-gradient(135deg, #667eea, #764ba2);