CSS Gradient Generator
Create beautiful CSS gradients with live preview
Gradient Settings
%
%
CSS Output
background: #667eea; background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%); background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
Usage Examples
Button
Frequently asked questions
What's the difference between linear and radial gradients?
Linear gradients transition colors along a straight line (left to right, top to bottom, or at an angle). Radial gradients radiate from a center point outward in a circular or elliptical shape.
How many color stops can I use?
CSS supports unlimited color stops, but 2-4 usually look best. Too many can create muddy colors or performance issues on older devices. Our tool supports up to 10 stops.
Do CSS gradients work in all browsers?
Modern CSS gradients are supported in all current browsers. Our generated code is compatible with Chrome, Firefox, Safari, and Edge. IE11 support requires vendor prefixes.