How do I add more colors to the gradient?

Click Add stop to insert another color, then pick its color and drag its position percentage. You can add as many stops as you like and remove any down to a minimum of two.

What is the angle for?

For linear gradients the angle sets the direction the colors flow — 0deg is bottom to top, 90deg is left to right, 180deg is top to bottom. Radial gradients spread from the center outward and ignore the angle.

CSS Gradient Generator

Build linear and radial gradients with custom color stops and angle, preview them live, and copy ready-to-use CSS. Runs entirely in your browser.

Type

Angle 90°

Color stops

CSS

Design gradients without guessing

CSS gradients are great-looking and zero-weight — no image to download — but hand-writing the syntax and re-loading to check is tedious. Here you pick colors and positions visually, watch the result update instantly, then copy a clean background declaration straight into your stylesheet.

Linear, radial and multi-stop

Choose a linear gradient and set its angle, or a radial gradient that spreads from the center. Add as many color stops as you need and slide each one's position to control exactly where colors blend. Two stops give a simple fade; three or more let you build rich, branded backgrounds and buttons.

Private by design. The generator runs in your browser — nothing is uploaded.

Frequently asked questions

How do I add more colors?

Click Add stop, pick a color and set its position. Remove any stop down to a minimum of two.

What does the angle do?

For linear gradients it sets direction (0° bottom-to-top, 90° left-to-right). Radial gradients ignore it.

Can I use the CSS anywhere?

Yes — it's standard CSS that works in every modern browser.

More free tools

Design tools: Color Palette Generator, Color Picker, Aspect Ratio Calculator · See all Alienated Tools.