CSS Gradient Generator
Build CSS linear and radial gradients visually. Adjust stops, copy the CSS. 100% in your browser.
Stops
background: linear-gradient(90deg, #2563eb 0%, #9333ea 100%);
About CSS Gradient Generator
The CSS Gradient Generator lets you build linear and radial gradients with a visual editor. Pick a gradient type, add or remove color stops, drag each stop to set its position, and adjust the angle for linear gradients. The preview updates as you change values, and the matching CSS appears below ready to copy into a stylesheet.
Everything runs in your browser, so the colors and settings you choose are never sent anywhere. You can use the generated code for page backgrounds, buttons, cards, or overlay effects, and tweak the stops further once you paste it into your project.
Frequently asked questions
- What is the difference between a linear and radial gradient?
- A linear gradient transitions colors along a straight line at a set angle, while a radial gradient spreads colors outward from a center point.
- Can I add more than two color stops?
- Yes. You can add several stops and position each one independently to create multi-color transitions.
- Does the generated CSS work in all browsers?
- Linear and radial gradients are supported in all current browsers using the standard linear-gradient and radial-gradient syntax.