Gradient Generator
Build the perfect gradient for your site, app or presentation: choose between linear, radial and conic, add up to six colors with adjustable positions, rotate the angle and watch the result live in a large preview area. When it looks right, copy the CSS code in one click — or start from one of twelve modern presets and tweak from there.
Presets
CSS code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Adjust colors and positions, watch the live result and copy the ready-to-use code.
Three gradient types
Linear is the classic for site backgrounds and buttons, with direction controlled by the angle. Radial radiates from the center, great for glow and highlight effects. Conic spins the colors around the center, ideal for donut charts and creative effects — and you can switch between the three keeping the same colors.
Fine color control
Each gradient color has its own picker and a 0–100% position control, allowing smooth transitions or hard stops. Add up to six color stops, remove the ones you don't want, and try the random button when you need inspiration.
How to use
Pick the type (linear, radial or conic), adjust the angle and set the colors — or click a preset to start pre-filled. The preview updates in real time. When you like the result, click "Copy CSS" and paste it straight into your stylesheet.
Frequently asked questions
Does the code work on any site?
Yes. The generated code uses the standard CSS gradient syntax, supported by all modern browsers.
How many colors can I use?
From two to six color stops, each with an adjustable 0–100% position.
Can I use the gradients commercially?
Yes. Gradients are style definitions with no usage restrictions.
What's the difference between linear, radial and conic?
Linear follows a straight direction (controlled by the angle), radial radiates from the center outward, and conic spins the colors around the center point.