CSS Gradient Generator
Build beautiful linear and radial CSS gradients with a visual editor. Add color stops, adjust angle, and copy the CSS.
Gradient Type
135°
Color Stops
Presets
CSS Output
Full CSS Rule
How to Use the CSS Gradient Generator
This tool lets you visually build CSS gradients by selecting colors, adjusting their positions, and choosing the gradient type. The generated CSS is ready to paste into your stylesheet.
Linear vs Radial Gradients
- Linear gradients transition colors along a straight line. You control the angle of the line, from 0 degrees (bottom to top) to 360 degrees. Common angles include 90 degrees (left to right) and 135 degrees (top-left to bottom-right).
- Radial gradients transition colors outward from a center point. You can choose between circular and elliptical shapes and position the center point.
Color Stops
Each color stop defines a color and its position along the gradient (0% to 100%). Add multiple stops to create complex, multi-color gradients. Drag the position slider to fine-tune where each color transition occurs.
Browser Support
CSS gradients are supported in all modern browsers. The generated CSS uses the standard syntax without vendor prefixes, which works in Chrome, Firefox, Safari, Edge, and all other current browsers.