CSS Gradient Generator
Add color stops, choose linear, radial or conic, and copy the finishedbackgroundCSS straight into your stylesheet. Start from a preset or build one from scratch.
Presets
Type
Color stops
Preview
CSS
常见问题
What's the difference between linear, radial and conic gradients?
A linear gradient transitions colors along a straight line at a chosen angle (0° points up, 90° points right). A radial gradient transitions colors outward from a center point in a circle or ellipse. A conic gradient sweeps colors around a center point like a color wheel, starting from a chosen angle. All three are widely supported in every modern browser.
How many color stops can I add?
As many as you like, each with its own color and position (0-100%). Position controls where along the gradient that color is centered, letting you create sharp transitions (stops close together) or smooth blends (stops spread out).
Do the presets lock me into that exact gradient?
No. Clicking a preset just loads its type, colors and stops into the editor as a starting point - every control stays fully editable afterward, so you can tweak the angle, add stops, or change colors to make it your own.
Can I use this gradient as a background image, not just a solid background?
Yes, the generated code is a valid value for the background or background-image CSS property. It works anywhere a background image would, including layered with an actual image using a comma-separated background-image list.