CSS Gradient Generator

What a CSS gradient is, and why hand written ones go wrong

A CSS gradient is not a color. It is a generated image, which is why it belongs to background-image rather than background-color, and why you can stack two of them or animate one. Everything on this page produces one of three functions: linear-gradient(), radial-gradient() and conic-gradient(), each followed by a list of color stops.

Three things trip people up when they type that list by hand. The first is the angle. CSS measures from 0deg pointing straight up and increases clockwise, so 0deg runs from the bottom edge to the top and 90deg runs left to right. Design tools do not all share that convention, so an angle copied out of a mockup often points somewhere unexpected.

The second is the midpoint. Two colors far apart on the wheel are interpolated straight through sRGB, and the halfway point is often a dull gray or muddy brown that neither end predicts. Blue to yellow is the classic offender. The fix is one extra stop in the middle with a hue you picked yourself.

The third is banding. Each channel has 256 steps, so a subtle gradient stretched across a full width hero can run out of distinct values and break into stripes. The preview shows all three at a realistic size, before the CSS reaches your stylesheet.

Which of the three gradient types to use

• Linear: a straight run from one edge to another. The default for hero banners, cards, buttons, progress bars and anything that reads as a surface. Diagonals at 45deg or 135deg look less mechanical than a flat horizontal run.
• Radial: color spreading outward from a center point. For glows, spotlights, vignettes and the highlight on a glossy button. The shape is a circle or ellipse rather than a direction, so the angle control disappears.
• Conic: color sweeping around a center point like a clock hand. Pie charts, donut charts, color wheels, progress rings and angular sheens are all made of it. The angle control becomes the start of the sweep.

Start from a preset and tune it into your palette

Editing something that already works beats starting from two blank colors. The preset library is grouped by mood, so pick the row that matches the feeling you want.

1. Click a preset. The preview, the CSS line and the Tailwind line all update together.
2. Drag the angle slider. On a wide banner, 120deg to 150deg usually reads better than a flat 90deg, because the transition crosses the box instead of running along it.
3. Replace the colors. Click a swatch for your system color picker, or type a six digit hex value beside it. Hues 20 to 40 degrees apart give the restrained look; opposite hues give a bolder one.
4. Move the stops. The percentage is where that color lands along the gradient line, so dropping the second stop from 100 to 70 makes the first color hold longer.
5. Add a stop if the middle looks dead, or remove one with the bin icon. Two is the minimum; past five or six it looks busy rather than rich.
6. Press Copy CSS and paste the declaration into your rule.

Build a conic gradient without a visible seam

A conic gradient wraps all the way round, so the last color meets the first again. If they differ you get a hard line at the starting angle. In a pie chart that line is the point; everywhere else it looks like a mistake.

1. Switch the type to Conic. The angle slider becomes the start angle: where the sweep begins, and where any seam will show.
2. For a smooth ring, give the first stop and the last stop the same hex value, at 0% and 100%. The wrap then happens between two identical colors and disappears.
3. For a color wheel, add stops at even percentages and walk the hue round: red, yellow, green, cyan, blue, magenta, back to red.
4. For pie chart segments, put two stops at the same percentage: the color has no distance in which to blend, so the edge is clean.
5. For a donut, clip the element to a circle and cut out the center. The gradient itself does not change.
6. Copy the CSS. The Tailwind field switches to a bracketed arbitrary value here, because the direction utilities only describe linear gradients.

Design notes that keep a gradient from looking cheap

• Two or three stops is usually enough. Every extra stop is another place the eye stops. Five or six is the ceiling.
• Keep the hues close. A shift of 10 to 40 degrees of hue plus a change in lightness reads as depth rather than as decoration.
• Prefer diagonals. 45deg and 135deg feel less static than 0deg or 90deg, and survive a change in element width better.
• Avoid the full rainbow unless a rainbow is genuinely what you want. It fights whatever sits on top of it.
• Check the text on top at both ends. Contrast has to hold at the worst point of the gradient, not on average. The contrast checker will tell you whether it does.
• Pick the end colors deliberately. The color converter moves a value between hex, RGB and HSL, so you can nudge the lightness alone.

Taking it away: CSS, a Tailwind class, or a link

Copy CSS gives a full declaration, ready to paste into a rule. The background shorthand works alone, but a solid fallback costs one line and covers the case where the gradient does not paint:

.hero {
  background-color: #c1170c; /* fallback */
  background-image: linear-gradient(135deg, #c1170c 0%, #fbe3dd 100%);
}

Copy Tailwind gives utility classes instead. For a linear gradient the page maps your angle to the nearest of the eight direction utilities and fills the from, via and to slots. Past three stops the middle ones are dropped, so use the CSS output when every stop matters.

Share linkcopies this page’s address with the type, angle and stops encoded in it, which travels through a chat message better than a screenshot does.

• In browser developer tools: paste the declaration into the Styles or Rules panel to see it on the real page first.
• In a React or Vue component: inline styles want camel case, so use style={{ backgroundImage: 'linear-gradient(...)' }} . The string inside the quotes is unchanged.
• On a phone: press and hold in the target field and choose Paste. The copy buttons use the standard clipboard API, which needs a secure connection.
• Into a design tool: most will not take a CSS gradient string, so copy the hex values and the angle by hand.

Where the syntax changes: frameworks, SVG and canvas

The CSS output is the portable one. Everything else has its own spelling, and some measure angles differently.

• Tailwind CSS: the class names on this page are the v3 spelling, bg-gradient-to-br and friends. In v4 the linear utilities were renamed to bg-linear-to-br, with bg-radial and bg-conic added, and at the time of writing the old names are kept as deprecated aliases. Check your project version before pasting.
• SVG: gradients are elements, not functions. Declare <linearGradient> or <radialGradient> inside <defs>, give each stop an offset and a stop-color, then reference it from fill by id. There is no conic gradient element.
• Canvas: use createLinearGradient(x0, y0, x1, y1), createRadialGradient() or createConicGradient(startAngle, x, y), then addColorStop() with a fraction from 0 to 1, not a percentage. The conic start angle is in radians from the positive x axis, so a CSS angle does not transfer directly.
• Old prefixed syntax: legacy -webkit-linear-gradient() named the side the gradient started from, while the standard function names the direction it travels toward, so an old snippet can come out mirrored. Current browsers do not need the prefix: delete those lines.
• HTML email: several clients drop background-image entirely. Declare a solid background-color first and treat the gradient as an enhancement.

Limits, accessibility and privacy

Hex only, and no alpha. The color fields take six digit hex values, so the gradient cannot fade to transparent from here. Add that by hand by ending on the same color with zero alpha, such as rgba(255, 255, 255, 0).

sRGB interpolation. The output uses the default color space, which every engine handles the same way. If a blend looks washed out in the middle, CSS lets you name a perceptual space, as in linear-gradient(in oklab, ...), which keeps the midpoint more saturated. Support is broad in current browsers at the time of writing but not universal, so test before relying on it.

Contrast is not decoration. Text over a gradient has to meet its ratio at the hardest point, and a gradient that passes at one end can fail at the other. A gradient should also never be the only thing carrying meaning: it is invisible to a screen reader and unreliable under forced colors mode.

Preview fidelity. A different display, especially a wide gamut one, renders the same hex values slightly differently, and banding shows up more on some panels. Check a large background on a real device before signing it off.

Nothing leaves your browser. The gradient string is built locally and the preview is drawn locally: no upload, no storage. The share link encodes your settings in the page address, so it only means anything here.