CSS Gradient Generator
Build linear, radial, and conic CSS gradients with unlimited color stops. Preview and copy the code.
Gradient Type
Color Stops
Presets
Generated CSS
How to Use the CSS Gradient Generator
Select a gradient type (linear, radial, or conic), adjust the angle or position, then add or modify color stops. Each stop has a color picker and a percentage position. The preview updates in real time, and you can copy the CSS with one click.
Types of CSS Gradients
- Linear: Colors transition along a straight line defined by an angle. The most common gradient type.
- Radial: Colors radiate outward from a center point in an elliptical or circular shape.
- Conic: Colors rotate around a center point, like a color wheel. Great for pie charts and sweep effects.
Tips for Beautiful Gradients
- Use colors that are close on the color wheel for smooth, natural transitions.
- Add a mid-point stop between two distant hues to avoid muddy gray bands.
- Try diagonal angles (135deg, 45deg) for more dynamic compositions.
- Combine gradients with
background-blend-modefor advanced effects.
Browser Support
Linear and radial gradients are supported in all modern browsers. Conic gradients are supported in Chrome, Edge, Safari, and Firefox 83+. No vendor prefixes are needed for current browser versions.