CSS gradient generator
Build a CSS gradient (linear or radial) with a live preview and ready-to-copy code.
🔒 100% client-side — no data sent
Generate a linear or radial CSS gradient with a live preview and copy the ready-to-use code straight into your stylesheet. Adjust colors, angle and stops to build modern backgrounds in a few clicks. The tool runs entirely in your browser, with no signup and no data sent.
FAQ
How do I create a CSS gradient?
Pick the type (linear or radial), choose your colors and angle, then copy the generated background property into your CSS.
What's the difference between linear-gradient and radial-gradient?
linear-gradient creates a color transition along a straight line (an angle), while radial-gradient radiates outward from a central point.
Can a gradient use more than two colors?
Yes, you can add as many color stops as needed to build multicolor gradients.
Is the generated CSS compatible with all browsers?
The linear-gradient and radial-gradient properties are supported by all modern browsers without prefixes.