CSS Gradient Generator
Build a linear or radial gradient visually with any number of color stops, then copy the CSS.
Color stops
Common questions
Can I add more than two colors?
Yes, click "Add color stop" as many times as you like. Each stop has its own color and position percentage, so you can build multi-color gradients, not just simple two-tone ones.
What's the difference between linear and radial?
Linear gradients transition in a straight line at whatever angle you set. Radial gradients transition outward from a center point in a circle, angle doesn't apply to those.
Is this sent anywhere?
No, the gradient is built and previewed entirely in your browser's CSS engine. Nothing is uploaded.