How do I make a CSS gradient?

Pick two or three colors, choose linear, radial or conic, set the angle, and copy the output. The generator writes both lines you want in production: a background-color as the fallback, then the background-image with the gradient, ready to paste into any stylesheet.

What does the smooth blend option do?

A browser blends between two stops in straight RGB, and between distant hues that path cuts through a grey dead zone in the middle. Smooth blend replaces the two-stop gradient with a dozen computed stops that walk the shortest way around the color wheel instead, so the middle of the run stays as alive as the ends.

What is the difference between linear, radial and conic gradients?

Linear runs the colors along a straight line at your chosen angle. Radial grows them outward from the center in rings. Conic sweeps them around the center like a clock hand, which is the one to reach for when you want a color wheel effect or a pie-chart look from pure CSS.

Why does the output include a background-color line?

It is the fallback: anything that cannot paint the gradient, an old email client, a print stylesheet, a browser mid-load, shows the first stop as a flat color instead of nothing. One extra line is cheap insurance for text that must stay readable on the background you meant.

Can I share a gradient I made?

Yes. The address bar tracks the gradient as you build it, so copying the link is enough, and Copy link puts it on your clipboard. Anyone opening it sees the same colors, angle and settings, and the space bar deals a fresh one when you want to start over.

What is a gradient scale?

The same blend expressed as a ladder of solid colors rather than one continuous image: every step the gradient passes through, each with its own hex. The blend-as-steps section below the output shows exactly that, and copies as CSS custom properties, which is how a design system stores the tints between two brand colors.

Gradient generator

Two or three colors in, working CSS out. Pick linear, radial or conic, set the angle, and copy a declaration pair with the fallback included. The smooth option rebuilds the blend from a dozen computed stops that take the short way around the color wheel, which is how a gradient keeps its color where the browser's own blending would go grey.

Smooth blend

Angle 135°

Press the space bar for a gradient worth keeping.

background-color: #7A5CFF;
background-image: linear-gradient(135deg, #7A5CFF, #FF6B9D);

The blend as steps

Every color the smooth blend passes through, as solid steps. Click one to copy it, or take the whole ladder as CSS custom properties for the tints between two brand colors.

Why gradients go muddy, and what smooth blend does about it

The grey midpoint problem

Ask a browser to blend red into cyan and it draws a straight line through RGB space, and the exact middle of that line is grey. Every pair of distant hues has the same dead zone. Designers route around it by hand, adding a stop or keeping hues neighbourly; smooth blend does it by computation, walking hue around the wheel so the midpoint is a color rather than an absence of one.

Reading the output

The generator emits two declarations. The background-color line is the fallback, shown by anything that cannot paint a gradient, and it uses your first stop so text sized for the gradient stays readable on it. The background-image line is the gradient itself, with every stop written as a hex you can edit later without reopening a tool.

Would you rather start from a finished one?

Sixteen named gradient pages carry seventy-odd finished gradients with their reasoning stated: what makes a gold read metallic, why sunsets are vertical, where a pastel can go that a saturated blend cannot. Open any of them in this generator and adjust from there.

Starting points from the gradient library

Common questions

How do I make a CSS gradient?: Pick two or three colors, choose linear, radial or conic, set the angle, and copy the output. The generator writes both lines you want in production: a background-color as the fallback, then the background-image with the gradient, ready to paste into any stylesheet.
What does the smooth blend option do?: A browser blends between two stops in straight RGB, and between distant hues that path cuts through a grey dead zone in the middle. Smooth blend replaces the two-stop gradient with a dozen computed stops that walk the shortest way around the color wheel instead, so the middle of the run stays as alive as the ends.
What is the difference between linear, radial and conic gradients?: Linear runs the colors along a straight line at your chosen angle. Radial grows them outward from the center in rings. Conic sweeps them around the center like a clock hand, which is the one to reach for when you want a color wheel effect or a pie-chart look from pure CSS.
Why does the output include a background-color line?: It is the fallback: anything that cannot paint the gradient, an old email client, a print stylesheet, a browser mid-load, shows the first stop as a flat color instead of nothing. One extra line is cheap insurance for text that must stay readable on the background you meant.
Can I share a gradient I made?: Yes. The address bar tracks the gradient as you build it, so copying the link is enough, and Copy link puts it on your clipboard. Anyone opening it sees the same colors, angle and settings, and the space bar deals a fresh one when you want to start over.
What is a gradient scale?: The same blend expressed as a ladder of solid colors rather than one continuous image: every step the gradient passes through, each with its own hex. The blend-as-steps section below the output shows exactly that, and copies as CSS custom properties, which is how a design system stores the tints between two brand colors.

All tools