Make a Multicolor CSS Background with Four Color Stops

Use several stops in one gradient image

To make a multicolor background in CSS, put three or more colors inside linear-gradient(). The browser draws transitions between consecutive stops. You do not need a separate element for every color when the colors are decorative parts of one surface. Assign the image to background-image and provide a solid background-color underneath it.

This example uses four pale colors behind a white reading panel. The palette belongs to the surrounding section; the panel controls the immediate background of the heading, description and link. That separation makes it easier to change the decorative palette without also redesigning the text contrast. Replace the sample words and destination with your own content before publishing.

Create a four-stop section

<section class="multicolor-section">
  <div class="multicolor-copy">
    <h2>Make room for new ideas</h2>
    <p>Browse the practical sessions in our upcoming workshop.</p>
    <a href="#sessions">Explore the sessions</a>
  </div>
</section>

.multicolor-section {
  padding: clamp(1rem, 5vw, 4rem);
  background-color: #eff6ff;
  background-image: linear-gradient(90deg,
    #eff6ff 0%, #ede9fe 35%, #fce7f3 70%, #fff7ed 100%);
}
.multicolor-copy {
  box-sizing: border-box;
  max-width: 38rem;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid #64748b;
  border-radius: .75rem;
  background: #ffffff;
  color: #172033;
  font: 1rem/1.6 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.multicolor-copy h2 { line-height: 1.2; }
.multicolor-copy a { color: #1d4ed8; text-decoration: underline; }
.multicolor-copy a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

At ninety degrees, the first stop is on the left and the final stop is on the right. Blue changes into violet over the first thirty-five percent of the gradient line. Violet changes into pink over the next thirty-five percent. The last transition, from pink into warm cream, occupies the remaining thirty percent. These positions describe the color transitions; they do not create four equally sized, solid columns.

Move a stop to change the composition

Try moving the violet stop from thirty-five percent to twenty percent while leaving the other positions alone. The first transition becomes shorter and the next transition becomes longer. This is a useful adjustment when a particular color seems too prominent, but it is different from reducing that color’s opacity. Every color in this recipe is opaque.

If you omit the positions for evenly spaced intermediate stops, the browser distributes them between the surrounding specified positions. Explicit positions are easier to discuss with a designer because everyone can refer to the same locations. Keep the stops in increasing order when you want ordinary smooth transitions. Equal adjacent positions create a sharp change instead, which may be appropriate for stripes but changes this example’s soft appearance.

Adjust direction for the actual section shape

Change ninety degrees to one hundred eighty degrees for a top-to-bottom arrangement. The color order stays the same, but the transition now follows the section’s height. A short banner and a long content section can therefore look very different with the same vertical gradient. Test the section with the real amount of copy instead of judging only a fixed-height swatch.

A diagonal direction is also possible, but its visible color distribution depends on the rectangle’s proportions. Avoid adding a fixed height just to reproduce a screenshot: translated headings and enlarged text need room to grow. The sample’s padding and content determine its height, while its copy panel has a maximum width rather than an inflexible width.

Start in the generator, then add the other stops

The CSS Gradient Generator previews two colors, an angle and a linear or radial choice. It does not expose four separate stop controls. Use it to compare the first and last colors and the overall direction, then add the two intermediate stops in your stylesheet as shown above. Keep the final edited CSS with the component; pasting the original two-color output again would replace those additions.

Inspect the finished section at a narrow phone width and a wide desktop width. Change the copy to a longer heading, enlarge the text, and tab to the link. The panel should expand without horizontal scrolling, and the link should retain its underline and focus outline. If the surrounding colors disappear in a user’s display mode, the words and link still need to explain the section without relying on the palette.

For the syntax and stop-position rules, see MDN’s linear-gradient reference. For separate colored areas that each contain different content, use a layout such as the colored Grid panels example instead of assigning meaning to decorative stops.

Related guides

Multicolor CSS Panels with a Responsive Grid Layout

Create separate colored CSS panels in a responsive grid, keep their reading order intact, and choose solid surfaces when each color belongs to real content.

CSS Make Grid

A practical guide to css make grid, including the key steps and checks for syntax, semantics, input data and environment-specific output.

Make a Rounded Gradient Border with CSS Backgrounds

Build a rounded CSS gradient border using two background layers, keep the inner surface opaque, and preserve visible focus and forced-color borders.