Explore gradient color palettes for backgrounds, hero surfaces, illustrations, and interface accents that need a controlled transition between hues.
Gradient palettes are sets of four stops already sorted from dark to light. They are meant to be blended, but the same ordering also makes them work as small tint scales for buttons, borders and backgrounds.
Of the 378 gradient palettes on this page, 376 are sorted by luminance from one end to the other. That is the main difference from the other collections: the four swatches are meant to be read left to right as stops, not as an unordered set.
About a third stay within a narrow hue range, roughly 60 degrees or less, so they act like single-hue tint scales (#003C43, #135D66, #77B0AA, #E3FEF7). The rest walk across neighboring hues, such as #640D6B magenta-purple through #B51B75 and #E65C19 to #F8D082 sand.
Paste the swatches in order as gradient stops. When the end colors are far apart in hue, interpolating in oklch keeps the lightness steps even and avoids the grayish midpoint that plain sRGB blending can produce. Keep a plain sRGB declaration first as a fallback for older browsers.
.hero {
background: linear-gradient(135deg, #074173, #1679ab, #5debd7, #c5ff95);
background: linear-gradient(135deg in oklch, #074173, #1679ab, #5debd7, #c5ff95);
}A ramp from dark to light cannot carry one text color across its whole length. In the example above, white text is 4.82:1 on #1679AB but only 1.47:1 on #5DEBD7. Navy #074173 does the opposite: 7.12:1 on #5DEBD7 and 9.00:1 on #C5FF95.
So either keep the text over one end of the gradient, or place it on a solid panel. If the headline spans the full width, bias the gradient so that most of the area behind it is the end your text color works on.
Single-hue ramps also work as a small token scale with no gradient involved. With #003C43, #135D66, #77B0AA, #E3FEF7: the lightest swatch is the page, the darkest is text (11.45:1), #135D66 is the button fill with white labels (7.54:1), and #77B0AA is reserved for borders and dividers.
Use only the two end swatches for a quiet gradient and all four when the hues are far apart. Take the content color from the dark end of the same palette so text and background feel related.
Contrast changes along a gradient. Over #640D6B to #F8D082, white text holds at 11.59:1 on the purple and 6.22:1 on magenta #B51B75, then drops to 3.55:1 over orange #E65C19. Measure against the lightest point the text overlaps, not the average.
Updated