CSS Gradient Generator
This CSS gradient generator blends your current color into a second color you choose and hands you the exact linear-gradient CSS to paste into a stylesheet. Set the two colors, pick a direction, and copy a ready-made background rule — no hunting for the right syntax or counting degrees. It is part of the same in-browser Color Picker: everything runs on your device, nothing is uploaded, and there is no sign-up.
Pick and copy colors.
How to use the gradient
- Start from the color you want as the first stop — set it with the native picker, the HEX field, or by clicking a swatch in the shades strip; that color becomes one end of the gradient.
- Pick the second color for the other end of the blend using the second-color control.
- Choose a direction — a keyword like to right or to bottom, or a corner — and watch the linear-gradient preview redraw as you switch.
- Click copy to grab the full linear-gradient CSS, ready to paste into a background or background-image property.
- Drop the rule into your stylesheet; to go beyond two colors, hand-edit the copied CSS to add extra color stops.
About the gradient
A CSS gradient is not a color — it is a generated image that CSS paints as a background, and the most common kind is the two-color linear gradient this page builds. The generator takes the color you already have in the Color Picker as the first stop, lets you pick a second color for the other end, and produces a rule like `background: linear-gradient(to right, #3b82f6, #ec4899);`. Choose a direction and the whole rule rewrites itself, so you copy working CSS instead of guessing at the syntax. Because it is one preset of the same tool, the color you land on with the HEX field, the picker, or the shades strip flows straight into the gradient without retyping anything.
The direction is the part people trip over, so it is worth being clear. The first value inside `linear-gradient()` sets the angle of the blend: keyword directions like `to right`, `to bottom`, or `to bottom right` point the gradient toward that edge or corner, and they are equivalent to angles — `to right` is `90deg`, `to bottom` is `180deg`. Angles in CSS run clockwise from `0deg` (straight up), which is the opposite of the math convention, so `90deg` sends the blend rightward rather than up. After the direction come the color stops; with two stops and no percentages, the browser fades evenly from the first color at 0% to the second at 100%. This generator writes the full `linear-gradient()` for you and gives you a one-click copy, so you drop it into a `background` (or `background-image`) property and it renders immediately.
One honest scope note: this makes a two-color linear gradient — the everyday case behind hero sections, buttons, and cards — not radial or conic gradients, and not multi-stop blends with three or more colors, though you can always hand-edit the copied CSS to add stops. Like the rest of the Color Picker it works only from color values you type or pick; it does not sample colors from an uploaded image and has no Pantone or print database, since screen gradients live in RGB. If you want to choose the two ends deliberately rather than eyeball them, build a set on the Color Palette page first — its harmonies give you colors that already sit well together — and if you need either end as channel numbers, the HEX to RGB page converts any stop in a click.
Frequently asked questions
- What is a CSS gradient generator?
- A CSS gradient generator turns a couple of colors into the linear-gradient rule your stylesheet needs. You pick the two ends and a direction, and it outputs something like background: linear-gradient(to right, #3b82f6, #ec4899); so you can copy it straight into your CSS instead of writing the syntax and angle by hand.
- How do I set the direction of the gradient?
- The first value inside linear-gradient() controls direction. Keyword directions like to right, to bottom, or to bottom right point the blend toward that edge or corner, and each maps to an angle — to right equals 90deg, to bottom equals 180deg. This generator lets you choose a direction and rewrites the full rule for you, so you never have to remember which way the degrees run.
- Why does 90deg point right instead of up in CSS?
- CSS gradient angles run clockwise starting from 0deg at the top, so 0deg points up, 90deg points right, and 180deg points down. That is the opposite of the math convention where 90deg is up. It catches people out, which is why this tool lets you pick a direction visually and outputs the correct angle keyword in the copied CSS.
- Do I use background or background-image for a gradient?
- A CSS gradient is a generated image, not a color, so it goes on background-image — or on the background shorthand, which accepts it. The rule this generator copies works in either: paste linear-gradient(...) as the value of background and it renders. Add a solid color as a fallback for very old browsers if you need one.
- Can I make a radial or conic gradient here?
- No. This page builds a two-color linear gradient, which is the case behind most hero sections, buttons, and cards. It does not generate radial or conic gradients. If you want those, you can start from the linear-gradient CSS this tool copies and change the function name and parameters by hand in your stylesheet.
- Can I add a third color or more stops?
- The generator itself blends two colors — a start and an end. CSS linear-gradient() happily takes three or more color stops, though, so the simplest path is to copy the two-color rule from here and add another color (optionally with a percentage) inside the parentheses. To choose colors that sit well together first, the Color Palette sibling page builds harmonies you can pull the stops from.
- Does this pick gradient colors from an image?
- No. Like the rest of the Color Picker, it works only from color values you type or select — it does not sample colors out of an uploaded photo, and it has no Pantone or print database. Screen gradients are RGB, so you choose your two ends with the picker or HEX field and the tool writes the CSS.
- Is the gradient CSS free to use and does anything get uploaded?
- It is completely free with no sign-up, and nothing is uploaded — the whole tool runs in your browser, so your colors never leave your device. The CSS it produces is standard linear-gradient() with no license strings attached; paste it into any project you like.