What is the solid-color line in the generated CSS for?

It is a fallback. Browsers that don't understand gradients ignore the second line, so they still show a solid background — the first stop's color. Modern browsers apply the gradient line, which overrides it.

Linear vs radial vs repeating — what's the difference?

Linear gradients sweep in a straight line at the angle you choose. Radial gradients radiate outward from a center point as circles or ellipses. The repeating versions tile the pattern so it loops back on itself — great for stripes.

What angle should I use for a linear gradient?

0deg points up, 90deg points right, 180deg points down, and 270deg points left. A classic diagonal look is 135deg. Drag the slider to any angle in between.

How do color stop positions work?

Each stop is a percentage along the gradient line: 0% is the start, 100% is the end. Put two stops at the same position and you get a hard line instead of a smooth blend — that's how stripes are made.

Why are my stops sorted by position in the output?

CSS reads stops in the order you write them, and unsorted stops can cause surprising color jumps. The tool sorts them by position automatically when it builds the code.

Is my data sent anywhere?

No. Everything runs in your browser with plain JavaScript. Nothing is uploaded or stored.

Free CSS Gradient Generator — Build Linear & Radial Gradients

How to build a CSS gradient

A CSS gradient is a smooth blend between two or more colors, drawn by the browser — no image files needed. The whole effect is a single line of CSS, so it scales perfectly to any screen size.

Pick a type. Linear sweeps in a straight line; radial radiates from a point; the repeating versions tile the pattern into stripes.
Set the angle or position. Linear gradients use an angle (90deg = left to right); radial gradients use a shape and a position (center, a corner, an edge).
Add color stops. Each stop is a color plus a position (0%–100%). More stops mean a richer blend; equal-position stops make hard stripes.
Copy the CSS. Two lines: a solid-color fallback for old browsers, then the gradient itself. Paste anywhere a background goes.

What "repeating" actually does

A normal gradient stretches your stops across the whole element. A repeating gradient treats the first-to-last stop as one tile and repeats it, like wallpaper. With stops close together (for example 0%, 10%, 20%), you get stripes; with hard edges at the same positions, you get crisp barber-pole bands.

Angles without the guesswork

CSS angles start at 0deg pointing up and increase clockwise — the opposite of compass bearings, which trips up almost everyone. 90deg points right, 180deg down, 270deg left. Diagonals like 135deg give that classic banner look. The preview panel updates as you drag, so you can judge by eye instead of memorizing the compass.

What is the solid-color line in the generated CSS for?: It is a fallback. Browsers that don't understand gradients ignore the second line, so they still show a solid background — the first stop's color. Modern browsers apply the gradient line, which overrides it.
Linear vs radial vs repeating — what's the difference?: Linear gradients sweep in a straight line at the angle you choose. Radial gradients radiate outward from a center point as circles or ellipses. The repeating versions tile the pattern so it loops back on itself — great for stripes.
What angle should I use for a linear gradient?: 0deg points up, 90deg points right, 180deg points down, and 270deg points left. A classic diagonal look is 135deg. Drag the slider to any angle in between.
How do color stop positions work?: Each stop is a percentage along the gradient line: 0% is the start, 100% is the end. Put two stops at the same position and you get a hard line instead of a smooth blend — that's how stripes are made.
Why are my stops sorted by position in the output?: CSS reads stops in the order you write them, and unsorted stops can cause surprising color jumps. The tool sorts them by position automatically when it builds the code.
Is my data sent anywhere?: No. Everything runs in your browser with plain JavaScript. Nothing is uploaded or stored.