CSS Gradient Generator

How CSS gradients are written

A gradient is a value you drop into any background (or background-image). The two you will use daily are linear-gradient(), which blends colors along a straight line, and radial-gradient(), which blends outward from a center point. Both take the same core ingredient: a comma-separated list of color stops. The simplest possible gradient is two stops — linear-gradient(90deg, #5b6cff, #22d3ee) — and everything else is just more control over where those colors land.

The angle is measured from straight up, clockwise

This is the single most common gradient mistake. In linear-gradient(angle, …) the angle is the direction the colors travel toward, measured clockwise starting from straight up. So 0deg flows bottom-to-top, 90deg flows left-to-right, 180deg flows top-to-bottom, and 270deg flows right-to-left. It is not a compass bearing and not a math angle — 90deg points right, not up. The preset buttons above cover the four cardinal directions plus the 45deg and 135deg diagonals so you can skip the arithmetic.

Worked example: an uneven three-stop blend

Leave every position blank and the browser spaces stops evenly. Set them explicitly and you control the whole curve:

background: linear-gradient(45deg,
  #ff0000 0%,
  #00ff00 50%,
  #0000ff 100%);

Move that middle stop to 20% and the red-to-green blend gets crushed into the first fifth while green-to-blue stretches over the rest. Put two stops at the same percentage — say #000 50% then #fff 50% — and the fade collapses into a hard edge, which is how you build two-tone bands and stripes with no image.

Circle vs ellipse in radial gradients

A radial gradient radiates from a center. An ellipse (the CSS default) stretches its color rings to the box's aspect ratio, so on a wide banner the rings are oval and touch all four edges together. A circle keeps the rings perfectly round no matter the box shape — right for spotlights, avatars and round buttons, but it leaves the far corners of a wide box in the outermost color. Toggle the two here and watch the preview to pick the one that fits.

Conic gradients sweep color around a center

A conic gradient does not blend along a line or outward in rings — it rotates the colors around a center point, like the sweep of a clock hand, which is why it is the go-to for pie charts, color wheels, angular loading spinners and shiny "conic" button borders. The syntax swaps the linear angle for two things: from <angle> sets where the sweep starts (0deg is straight up, increasing clockwise) and at <x>% <y>% moves the pivot off center. The other big difference is the stops: a conic stop's position is an angle in deg, not a length in % — red 0deg, blue 180deg means red at the top sweeping to blue at the bottom of the circle. This tool honours the CSS defaults and only writes what you change, so a centered sweep starting from the top emits a clean conic-gradient(#5b6cff, #22d3ee), and it grows to conic-gradient(from 45deg at 25% 75%, …) the moment you move the start angle or the center. Put two stops at the same angle to get a hard pie-slice edge instead of a smooth fade. One honest limit: hard-edged pie segments can show a faint jagged seam at the boundary because gradients are anti-aliased per pixel, not vector-crisp — fine for backgrounds and charts, but for print-sharp wedges reach for an SVG.

Fading to transparent for overlays

Because any stop can be a translucent color, gradients are the cleanest way to build image scrims and fade-outs. Drop a stop's opacity to zero and this tool emits it as rgba(r, g, b, 0) rather than the keyword transparent — that matters because some older engines interpolated transparent through grey, giving a muddy fade, whereas fading to the same RGB at alpha 0 stays clean. A classic caption scrim is linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0)) layered over a photo. Need the raw color math? The Color Converter turns any HEX into rgba, and the WCAG Contrast Checker confirms text stays readable over the result.

Where the output works — and its limits

The value this tool produces is standard, unprefixed CSS, so a plain background: linear-gradient(...) works in every current browser without a -webkit- fallback. You can also layer multiple gradients by stacking comma-separated backgrounds, though this generator builds one gradient at a time to keep the output honest and copy-clean. Two real limits: the angle-along-a-line model cannot do arbitrary curved or freeform blends the way a mesh gradient in a design tool can, and very large elements with many soft stops can cost a little paint performance on low-end devices — ship the fewest stops that read right. Colors are standard 8-bit sRGB; the preview swatch is a plain rectangle, so confirm the gradient on your real element, whose size and border-radius will subtly change how the same value reads.