How to Choose Colors for linear-gradient(): Tips for Natural-Looking Gradients

A linear gradient can bring gentle color variation to a website background without requiring a separate image. But when the colors differ too sharply, one part of the transition may draw too much attention, or text placed over it may become hard to read. Choosing colors for a natural-looking gradient involves more than finding two attractive swatches: direction, the positions of color stops, and foreground contrast also matter. This article works through those decisions using CSS linear-gradient().

Start with related hues and similar brightness

linear-gradient() is a CSS function that generates an image in which colors change along a straight line. CSS (Cascading Style Sheets) defines the visual appearance of a webpage. With linear-gradient(to right, ...), colors progress from left to right; to bottom produces a top-to-bottom transition. Angles are another option: 90deg means left to right and 180deg means top to bottom. If the direction is omitted, the default is top to bottom.

For a restrained transition, begin with two colors that have related hues (families such as blue or green), similar lightness, and similar saturation (how vivid or muted a color is). Mixing very distant hues or a dark color with a bright, highly saturated color may make the transition more dramatic than intended. This is a design starting point rather than an absolute rule; contrasting colors can also suit a particular purpose.

If two colors produce an awkward transition, try an intermediate color as a third stop. Adding more stops does not automatically create a smoother-looking gradient; add only those needed to improve the visual connection. Positions such as 0%, 55%, and 100% control where the specified colors appear along the gradient line. Because the gradient is an image value in CSS, apply it through background-image rather than background-color.

Example: a consultation banner blending pale blue into mint

Imagine a wide banner promoting website-design consultations. The background starts with pale blue ■#EFF6FF, moves through soft blue-cyan ■#DCEEF5, and ends with light mint ■#E2F5EB. Their lightness stays relatively close while the hue shifts gradually from blue toward blue-green. The aim is a calm setting that supports the message rather than competing with it. Dark blue-gray ■#1C3442 is used for text, while a deeper blue-green ■#0E5964 identifies the action link.

<section class="consult-banner">
  <div class="consult-banner__copy">
    <h2>Discuss your website colors</h2>
    <p>Build a palette around your goals, one step at a time.</p>
    <a class="consult-banner__cta" href="/contact/">See consultation options</a>
  </div>
</section>

.consult-banner {
  padding: clamp(24px, 5vw, 56px);
  background-color: rgb(239 246 255);
  background-image: linear-gradient(
    to right,
    rgb(239 246 255) 0%,
    rgb(220 238 245) 55%,
    rgb(226 245 235) 100%
  );
  color: rgb(28 52 66);
}
.consult-banner__copy { max-width: 38rem; }
.consult-banner__cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-radius: 0.5rem;
  background-color: rgb(14 89 100);
  color: rgb(255 255 255);
  text-decoration: underline;
}
.consult-banner__cta:hover {
  background-color: rgb(8 70 80);
}
.consult-banner__cta:focus-visible {
  outline: 3px solid rgb(14 89 100);
  outline-offset: 3px;
}

Here, to right sets the overall direction, and the 55% stop places the middle blue-cyan somewhat to the right of the midpoint. The separate background-color is the same pale blue as the first stop, providing a solid fallback if the gradient is not displayed. The action label is white ■#FFFFFF; on hover, its blue-green background darkens to ■#084650. The /contact/ URL in the sample is illustrative, so replace it with your actual destination.

Adjust harsh transitions and verify text contrast

Before adding more colors, examine the lightness and saturation at both ends and try changing the gradient direction. If the middle color looks out of place, adjust that stop or return to two colors for comparison. A mobile screen compresses a left-to-right transition into a smaller width, so inspect the color directly behind the text on both wide and narrow layouts.

For dark blue-gray ■#1C3442 text, the contrast ratios against the three specified background colors are approximately 11.92:1 on pale blue ■#EFF6FF, 10.86:1 on blue-cyan ■#DCEEF5, and 11.42:1 on mint ■#E2F5EB. The white ■#FFFFFF action text against its deep blue-green ■#0E5964 background reaches about 7.98:1, increasing to about 10.49:1 against the darker hover background ■#084650. Each of these pairs exceeds the 4.5:1 minimum for normal-sized text under the Web Content Accessibility Guidelines (WCAG) 2.2.

Those checks cover the stated color stops, not an automatic assessment of every intermediate pixel in the rendered gradient. Also inspect the actual text positions, screen sizes, and keyboard focus indication. The blue-green ■#0E5964 focus outline has a contrast ratio of at least approximately 6.68:1 against the three specified background colors, exceeding the 3:1 guideline relevant to important non-text interface indicators. HueRoll can help you explore the source colors, but it does not automatically evaluate arbitrary color pairs or text contrast across a complete gradient. Always check the finished interface rather than judging only the individual colors.