CSS Gradient Generator — Free Online Tool
Create CSS gradients online for free. Generate linear, radial, and conic gradients with live preview. Copy the CSS code instantly. No signup needed.
About CSS Gradient Generator
CSS gradients create smooth colour transitions without needing image files, improving web performance. Our gradient generator provides a visual editor for creating linear gradients (directional colour fades), radial gradients (circular centre-outward fades), and conic gradients (angular sweeping colours). Add multiple colour stops, adjust positions and colours with drag-and-drop, set the gradient angle or direction, and copy the complete CSS background-image code ready to paste into your stylesheet. A live preview canvas shows your gradient in real time as you design.
Frequently Asked Questions
What types of CSS gradients can I create?
Linear (directional), radial (circular), and conic (angular sweep) gradients are all supported.
Can I add more than two colour stops?
Yes — add as many colour stops as you need at any position along the gradient.
Does the generated code include browser prefixes?
Yes — -webkit- prefixes for older Safari/Chrome compatibility are included.
Can I create transparent gradients?
Yes — each colour stop supports full RGBA values including the alpha channel.
Can I use this for HTML email backgrounds?
CSS gradients have limited email client support. Use a fallback background-color alongside the gradient.