Gradient Generator
Design a linear or radial CSS gradient and copy the code.
Click the bar to add a stop · drag a stop to move it · click a stop to edit its color
Selected stop
CSS
Key features
Add color stops, adjust the angle, and switch between linear and radial to design a gradient — the preview and ready-to-use CSS both update instantly.
Everything runs locally in your browser. Nothing you build here is sent anywhere.
How to use
Choose linear or radial
Pick the gradient type, and an angle if it’s linear.
Drag stops on the bar
Click the bar to add a stop, drag a stop to reposition it, or click one to change its color.
Copy the CSS
The generated background-image CSS is ready to paste into your stylesheet.
Frequently asked questions
What’s the difference between linear and radial gradients?
A linear gradient transitions colors in a straight line at a given angle. A radial gradient transitions outward from a center point in a circle, which is useful for spotlight or vignette-style effects.
How do I add or remove a color stop?
Click anywhere on the gradient bar to add a new stop at that position — its color is automatically blended from its neighbors. Click an existing stop to select it, then use the remove button in the editor panel below the bar (you always need at least two stops).
Can I use this gradient as a background image, text fill, or border?
The generated value works for background-image directly. It can also be used with background-clip: text for a gradient text effect, or as a border-image source, though those need a bit of extra CSS beyond what’s copied here.
Is my gradient saved anywhere?
No. It exists only in this browser tab — nothing is stored or transmitted.