HTML & CSS

CSS Color Gradients: Smooth Blends, Stops and Stripes

Compare smooth CSS gradients, hard color stops and repeating stripes, calculate the repeat length, and add a solid reading panel over a decorative pattern.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Choose a blend or a repeating pattern

A CSS color gradient is a generated image. The phrase CSS3 gradient is often used in older tutorials, but the useful question is which gradient function and syntax your design needs. A smooth linear-gradient blends between colors. Two adjacent stops at the same position create a hard boundary. A repeating-linear-gradient continues a defined sequence across the background.

This guide uses a repeating diagonal stripe pattern. Each stripe is sixteen pixels wide along the gradient line, and the two-color sequence repeats every thirty-two pixels along that line. A white content panel sits over the pattern so the decorative edges do not pass behind paragraph text. This is a static effect and does not require animation or JavaScript.

Build a thirty-two-pixel repeat

<section class="stripe-section">
  <div class="stripe-copy">
    <h2>A clear place to begin</h2>
    <p>Use this panel for the message that matters.</p>
  </div>
</section>

.stripe-section {
  padding: clamp(1rem, 5vw, 3rem);
  background-color: #dbeafe;
  background-image: repeating-linear-gradient(45deg,
    #dbeafe 0px, #dbeafe 16px,
    #ede9fe 16px, #ede9fe 32px);
}
.stripe-copy {
  box-sizing: border-box;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.25rem;
  border: 1px solid #64748b;
  background: #ffffff;
  color: #172033;
  font: 1rem/1.6 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.stripe-copy h2 { margin-top: 0; line-height: 1.25; }
.stripe-copy p { margin-bottom: 0; }

Blue begins at zero and remains blue through sixteen pixels. Violet begins at that same sixteen-pixel location, so there is no transition interval between the colors. Violet continues through thirty-two pixels, where the next repeat starts with blue again. The distance from the first stop to the last stop is the repeat length; the final number is not a request for thirty-two stripes.

Double the stripe width without changing the element

For wider bands, change both occurrences of sixteen pixels to thirty-two pixels and change the final thirty-two-pixel stop to sixty-four pixels. The blue and violet widths both double. Changing only the last stop would make the violet stripe wider while leaving the blue stripe unchanged, so the pattern would no longer have equal bands.

These measurements run along the gradient direction. At forty-five degrees, a horizontal ruler across the screen does not measure a sixteen-pixel stripe interval. To inspect the arithmetic more directly, temporarily change the angle to ninety degrees. The bands become vertical and the repeated color sequence can be measured horizontally. Restore the diagonal angle after checking the stop positions.

Switch deliberately between smooth and hard stops

For a smooth two-color background, replace the repeating image with linear-gradient(90deg, #dbeafe, #ede9fe). Without intermediate positions, the colors blend across the gradient line. For a single hard split, use linear-gradient(90deg, #dbeafe 50%, #ede9fe 50%). Both colors meet at the midpoint, and the two halves do not blend into one another.

Do not expect background-color to accept any of those expressions: it expects a color, while the gradient functions produce images. Keeping background-color as a separate solid fallback also makes the stylesheet easier to inspect. A later background shorthand can reset the image, so check the cascade if a previously working gradient suddenly becomes a flat surface.

Keep the pattern independent from the reading area

Because this repeat uses pixel lengths, enlarging the section reveals more bands instead of stretching a fixed number of bands to fit. Percentage stops would tie the repeat length to the gradient image’s dimensions. Choose the version that matches the design intent: a consistent small pattern or a fixed proportion of a responsive area.

Very narrow, high-contrast stripes can be visually distracting even when the text itself has good contrast. Use the pattern in the surrounding space, keep the reading panel opaque, and check a real screen rather than relying only on an enlarged design canvas. If colors disappear in a forced-color display, the heading and paragraph must still carry the entire message.

Generate the base, then write the repeating stops

The CSS Gradient Generator supports a two-color linear or radial preview. It does not build repeating stripe intervals. Use its linear setting to compare the colors and direction, then replace the image declaration with the repeating function above. Copying its output again will restore an ordinary two-color gradient, so retain the hand-edited pattern in your component stylesheet.

Check the example with both sixteen-pixel and thirty-two-pixel bands, at a narrow phone width and a wide desktop width. Increase the text size and lengthen the heading; the panel should grow without hiding its words or causing horizontal scrolling. MDN documents repeating-gradient syntax, and CSS Images Level 3 defines the underlying gradient model.