How do I add more colors to my gradient?

Click Add to insert another color stop, then choose its color and drag its position. You can add as many stops as you need for multi-color gradients.

What is the difference between linear and radial gradients?

A linear gradient blends colors along a straight line set by an angle, while a radial gradient spreads colors outward from a central point as a circle or ellipse.

What does the angle control?

For linear gradients, the angle sets the direction of the blend. 0 degrees goes bottom to top and 90 degrees goes left to right.

Will the CSS work in all browsers?

Yes. The generator outputs standard linear-gradient and radial-gradient CSS, which is supported by all modern browsers.

Can I copy the code easily?

Yes. The CSS updates live as you edit, and the Copy CSS button puts the ready-to-use background declaration on your clipboard.

CSS Gradient Generator - Linear & Radial Gradient Maker

Create CSS Gradients Visually

This CSS gradient generator lets you design smooth color gradients and copy clean, ready-to-use CSS. Switch between linear and radial styles, add as many color stops as you like, drag each stop's position, set the angle, and watch the preview update live. When it looks right, copy the code straight into your stylesheet. Everything happens in your browser.

How to build a gradient

Choose linear for a directional blend or radial for one that spreads from the center.
Add or remove color stops and pick a color for each.
Adjust each stop's position and, for linear gradients, the angle.
Copy the generated CSS and paste it into your project.

Linear versus radial

A linear gradient transitions colors along a straight line, with the angle controlling direction: 0 degrees runs bottom to top, while 90 degrees runs left to right. A radial gradient radiates outward from a central point and can be a circle or an ellipse, which is useful for spotlights, soft backgrounds and button highlights.

Working with color stops

Color stops define which color appears at which point along the gradient. Two stops give a simple blend; adding more lets you create rich, multi-color transitions. Placing two stops close together creates a sharper edge, while spreading them out softens the blend. Position is measured as a percentage from the start of the gradient.

Tips for great gradients

Keep it subtle for backgrounds, where gentle shifts look more professional than harsh jumps.
Use related hues for smooth blends; very different colors can produce a muddy middle.
Test readability if text sits on the gradient, since contrast changes across it.

The generated code uses standard CSS that works in all modern browsers, so you can drop it into any website or app.