CSS Gradient Generator
Create stunning CSS gradients with a visual editor. Linear, radial, and conic gradients with unlimited color stops and angle control.
background: linear-gradient(135deg, #EC4899, #06B6D4);How to Generate a CSS Gradient
Pick your gradient type (linear, radial, or conic), choose two or more colors, and adjust the angle or position. The live preview updates as you tweak. When you are happy, click "Copy CSS" to get the production-ready code, then paste it into the background-image property of any element.
Linear vs Radial vs Conic
Linear is the workhorse — gradients that fade in one direction. Perfect for hero sections, buttons, and atmospheric backgrounds. Radial creates spotlight effects, glowing buttons, and depth illusions. Conic rotates colors around a center point, ideal for pie charts, color wheels, and modern decorative elements.
Designing Beautiful Gradients
The most pleasing gradients use 2–3 colors that are close on the color wheel (analogous) with similar saturation. Avoid mixing fully saturated complementary colors — the mid-point often looks muddy gray. Famous examples: Stripe's purple-pink, Instagram's red-orange-yellow, Spotify's green-blue. Keep direction consistent (e.g., always top-to-bottom) across one design for harmony.
Browser Support and Performance
All modern browsers (Chrome, Firefox, Safari, Edge) support CSS gradients natively. They render on the GPU, so they cost less than image files and scale infinitely. For maximum compatibility on older browsers, the tool also outputs vendor-prefixed versions (-webkit-, -moz-) when relevant.