CSS Gradient Generator

This CSS gradient generator builds linear and radial gradients from color stops you control, with a live preview and a ready-to-paste background declaration. Drag the stops along the bar, set the angle or shape, and the CSS updates instantly.

Everything runs in your browser from the colors and settings you choose, so nothing is uploaded and you can copy the result and use it offline.

A linear gradient blends colors along a straight line, and the angle sets its direction: 0 degrees points up, 90 degrees points right, 180 degrees points down. A radial gradient blends outward from the center, as a circle or an ellipse.

Both are standard CSS values, written as linear-gradient() and radial-gradient(), and both use the same list of color stops, so switching the type keeps your colors and only changes how they spread.

Each color stop is a color placed at a position from 0% to 100%. The gradient blends smoothly between neighboring stops, so a stop's position controls where its color peaks and how quickly it fades into the next one.

Add as many stops as you need to build multi-color gradients, drag them to fine-tune the blend, or click the bar to drop a new stop where you want it. Two stops is the minimum a gradient needs.

Copy the generated code and paste it as the background of any element, such as a section, card or button. Modern browsers support linear-gradient and radial-gradient without a vendor prefix, so the value works as-is.

Because a gradient is just a value, you can also use it anywhere a background image is expected, layer it over a solid color as a fallback, or reuse the same stops across a linear and radial version for a consistent look.