HTML & CSS

Layer Multiple Linear Gradients in One CSS Background

Combine multiple linear gradients with layer order, transparency, size, and repeat settings. Build a grid pattern without overwriting the base gradient.

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

Give each gradient its own background layer

To use multiple linear gradients on one element, put them in a comma-separated background-image list. The first gradient is painted on top. A lower gradient is visible only where the upper layer is transparent or does not cover the same area. Multiple declarations of background-image do not accumulate automatically; a later winning declaration replaces the earlier value.

This is useful for patterns, highlights and overlays because each gradient can have its own direction and sizing. Start by deciding what each layer contributes. In the example below, the top layer draws horizontal grid lines, the next draws vertical lines, and the final layer supplies a pale diagonal color blend.

Build a grid over a full-size color gradient

Use this decorative surface behind a separate content panel. The two pattern gradients each draw a one-pixel line and leave the rest of their tile transparent. Their thirty-two-pixel background sizes determine the grid spacing. The lower gradient fills the entire element instead of repeating as a small square tile.

<section class="gradient-grid">
  <div class="grid-copy">
    <h2>A layered background</h2>
    <p>Two line layers and one color layer.</p>
  </div>
</section>

.gradient-grid {
  box-sizing: border-box;
  max-width: 48rem;
  margin: 1rem auto;
  padding: 2rem;
  background-color: #eff6ff;
  background-image:
    linear-gradient(to bottom, rgb(30 64 175 / .2) 1px, transparent 1px),
    linear-gradient(to right, rgb(30 64 175 / .2) 1px, transparent 1px),
    linear-gradient(135deg, #eff6ff, #e0e7ff);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  background-position: 0 0, 0 0, center;
  background-repeat: repeat, repeat, no-repeat;
}
.grid-copy {
  padding: 1rem;
  color: #172554;
  background: #ffffff;
}

Both color changes in each line gradient occur at the same one-pixel position. That creates a hard edge rather than a long fade. The remaining thirty-one pixels are transparent, revealing the underlying color surface. The lines appear darker at intersections because two partially transparent painted layers overlap there.

Match companion lists to the image order

Read the background-image, background-size, background-position and background-repeat lists by position. The first entry of each list belongs to the horizontal-line layer, the second to the vertical-line layer, and the third to the base. Keeping all three entries explicit makes later edits easier to review.

CSS can repeat shorter value lists to match a longer image list, but that convenience can hide a mistake in a complex design. For example, a single background-size: 32px 32px would also tile the lower color gradient. Here that would replace the smooth full-panel blend with a repeated small gradient pattern.

Change spacing and color without losing the structure

Change the first two size entries from thirty-two to forty-eight pixels to spread the grid lines farther apart. Leave the third entry at one hundred percent in both directions. Change both pattern colors together if the grid should remain visually uniform, or intentionally assign separate colors if the two line directions convey different decoration.

To move the grid relative to the panel edges, adjust the first two position entries. To move just one line direction, change only its corresponding entry. Avoid adding a new background shorthand after these rules unless you intend to reset all the associated layer properties as part of that change.

Isolate layers when debugging

If the base gradient disappears, temporarily remove the top layers and confirm the base alone. Then add each line gradient back, checking its transparent region and repeat behavior. An accidentally opaque white stop in an upper layer can conceal the lower image even while the browser reports all three functions as valid.

If the grid looks uneven, inspect the rendered dimensions and zoom level. A one-CSS-pixel line may map to fractional device pixels at some zoom settings. Check the actual page at the supported zoom levels before changing the stop values to compensate for one screenshot’s rasterization.

Use the generator for an individual layer

The CSS Gradient Generator exports one two-color gradient at a time. It can supply the lower 135-degree color blend in this example. It does not assemble multiple backgrounds, create transparent hard stops or assign per-layer repeat settings; those are manual stylesheet operations shown above.

MDN’s multiple-background documentation describes the ordering and list behavior. After assembling the layers, inspect the complete component at narrow and wide widths. Keep important text on a surface with predictable contrast instead of assuming that a decorative pattern remains equally readable behind every line of content.