CSS Gradient Generator
Design a linear or radial CSS gradient with multiple color stops, angle control, and a live preview, then copy the ready-to-use CSS.
0%
100%
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);Ad space
Frequently asked questions
Can I add more than two color stops?+
Yes, click "Add color stop" to add as many as you like, each with its own color and position.
What's the difference between linear and radial gradients?+
Linear gradients transition along a straight line at a chosen angle; radial gradients radiate outward from a center point in a circular pattern.
Does the generated CSS work in all browsers?+
Yes, linear-gradient() and radial-gradient() are standard CSS supported by all modern browsers without vendor prefixes.