CSS Gradient Generator
Free online CSS gradient generator. Create beautiful linear, radial, and conic gradients with a live preview. Customize color stops and copy the CSS code instantly.
Presets
Gradient Type
Angle: 135Β°
Color Stops
0%
100%
CSS Code
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);How to Use
Choose a gradient type
Select Linear, Radial, or Conic. For linear and conic gradients, adjust the angle with the slider.
Customize color stops
Pick colors with the color picker or enter HEX codes. Drag the sliders to set each stop's position (0β100%).
Copy the CSS
Click the Copy button to copy the generated CSS background property and paste it directly into your stylesheet.
FAQ
- A CSS gradient is a smooth transition between two or more colors defined entirely in CSS β no image file needed. Gradients are set using the background or background-image property with linear-gradient(), radial-gradient(), or conic-gradient().
- A linear gradient transitions colors along a straight line (by angle). A radial gradient radiates outward from a center point. A conic gradient sweeps colors around a center point like a color wheel.
- Click the '+ Add Stop' button. A new stop is inserted at the midpoint of the largest gap between existing stops. You can then adjust its color and position.
- Yes. The generated CSS uses the standard background shorthand (e.g., background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);) which works in all modern browsers.