CSS Gradient Generator

1. Choose Linear, Radial or Conic.
2. For linear and conic gradients, drag the angle slider anywhere from 0° to 360°. Radial gradients are drawn as a circle from the center, so they have no angle.
3. Set each color stop: pick its color and drag its position between 0% and 100%. Use Add Stop when you need another one.
4. Copy the generated CSS into a background or background-image declaration.

A three-stop result looks like linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%). Stops are written out in position order, so the CSS always matches the preview. Fine-tune a stop color in the color picker first if needed.

Linear gradients blend along a straight line and cover most jobs: hero backgrounds, button fills and fade-to-transparent overlays on photos. Radial gradients spread outward from a point. With circle at center, 0% is the center and 100% reaches the farthest corner of the box, which suits glows, spotlights and vignettes. Conic gradients sweep around the center like a clock hand, so positions map to angles: 25% is a quarter turn. That makes conic the right choice for pie charts, color wheels and progress rings.

All three are CSS images: no HTTP request, sharp at any size, and stackable with commas in one background declaration.

The angle is the direction the gradient travels toward. 0deg points to the top, 90deg to the right, 180deg to the bottom and 270deg to the left, increasing clockwise. With no angle, linear-gradient() defaults to 180deg, top to bottom. This is not the math convention where 0° points right, which is why copied gradients sometimes come out rotated.

Corner keywords are not fixed angles. to bottom right equals 135deg only on a square; on other shapes the browser recalculates the angle so the halfway line runs between the top-right and bottom-left corners. For conic gradients, from 0deg starts at 12 o'clock and from 90deg at 3 o'clock.

A stop's position is where its color is fully reached; between two stops the browser blends. Give two neighboring stops the same position and the blend disappears: linear-gradient(90deg, #6366f1 50%, #ec4899 50%) splits the box into two solid halves. Hard stops are the basis of stripes, split backgrounds and progress bars. In a conic gradient, the same trick draws a pie chart: conic-gradient(#6366f1 0% 40%, #e5e7eb 40% 100%) fills 40% of the circle.

Browsers blend gradients in sRGB by default, which takes a straight line through the RGB cube. Between colors on opposite sides of the wheel, that line passes through gray: halfway from #0000ff to #ffff00 is about #808080, a flat gray. Two fixes:

• Add a midpoint stop. Put a saturated in-between color at 50%, such as a teal between blue and yellow, so the blend never reaches gray.
• Interpolate in OKLCH. Add a color space to the copied CSS: linear-gradient(90deg in oklch, #0000ff, #ffff00). OKLCH moves around the hue wheel while keeping chroma, so blue to yellow passes through teal and green. Current versions of all major browsers support it. Older ones drop the declaration, so put a plain gradient on the line above as a fallback.

To preview a blend before committing to it, the color mixer shows every 10% step between two colors.