CSS Gradient Layers: Position, Size, Repeat, Attachment, and Blend‑Mode

This part dives into the levers that make layered gradients precise and reusable.

List alignment 101

Most background properties accept comma‑separated lists. They align by index with background-image layers.

background-image:
  radial-gradient(circle at 20% 20%, rgba(120,180,255,.35), transparent 60%), /* 1 */
  linear-gradient(180deg, #1c307d, #09164b);                                  /* 2 */

background-position: 0 0, center;         /* 1→(0,0), 2→center */
background-size: 200px 200px, cover;      /* 1→200×200, 2→cover */
background-repeat: no-repeat, no-repeat;  /* both no-repeat */

If you copy the CSS background properties above and import them into the /craft page, you can see that they are converted to shorthand:

background:
  radial-gradient(
    circle at 20% 20%,
    rgba(120, 180, 255, 0.35),
    transparent 60%
  )
    0 0 / 200px 200px no-repeat,
  linear-gradient(
    180deg, #1c307d, #09164b
  )
    center / cover no-repeat;

If a list has fewer items than images, the list cycles to match the count. In practice, specifying one value applies to all layers.

/* One position declared → used for all layers */
background-position: center; /* center, center, center… */

Sizing layers

background-size accepts keywords (cover, contain), two lengths/percentages (width height), or a single length (width height-auto). For gradients, the default auto fills the painting area, so tiling won’t happen unless you make the size smaller than the area.

Demo (vertical pinstripes):

/* Small tile repeated via background-size */
background-image: linear-gradient(90deg, rgba(0,0,0,.42) 50%, transparent 0);
background-size: 24px 100%; /* A 24px stripe tile */
background-repeat: repeat;  /* Repeats across the x-axis */

Positioning layers

The background below uses a combination of two methods for positioning to construct the pattern.

• The first method uses gradient parameters, where radial and conic gradients define the center position after the at keyword. Alternatively, the edges can be defined by the radius or color transitions of the gradient.
• The second method uses background-position and background-size. background-position is used to position the pattern within the layer only when background-size is not auto.

background: 
  conic-gradient(
    at 80px 20px,
    #fff 25%,
    transparent 0
  )
    20px 80px / 100px 100px,
  conic-gradient(
    at 60px 40px,
    red 25%,
    transparent 0
  )
    80px 20px / 100px 100px,
  conic-gradient(
    at 40px 60px,
    #fff 25%,
    transparent 0
  )
    40px 60px / 100px 100px,
  conic-gradient(
    at 20px 80px,
    red 25%,
    transparent 0
  )
    0 0 / 100px 100px,
  repeating-linear-gradient(
    45deg,
    red 0 1.41px,
    transparent 0 2.83px
  )
    0 0 / 100px 100px;
background-blend-mode:
  normal, normal, color, difference, difference;

Repeat behavior

• repeat: tile in both directions
• repeat-x / repeat-y: tile on one axis
• no-repeat: draw once

For most full‑area gradients, repeat vs no-repeat makes no visual difference until you explicitly size the layer smaller than the background area.

Attachment

background-attachment: fixed pins a layer to the viewport (parallax‑like), while local ties it to the element’s scroll container. Use sparingly and test on mobile (performance varies across engines).

background:
  radial-gradient(circle, rgba(120,180,255,.35), transparent 60%) 50% 0% / 100px 100px no-repeat,
  radial-gradient(circle, rgba(120,180,255,.35), transparent 60%) 67% 0% / 100px 100px no-repeat,
  linear-gradient(180deg, #1c307d, #09164b);
background-attachment: local, scroll, fixed; /* top layer scrolls, base layer stays */

Blend modes that work well

background-blend-mode mixes layers where they overlap. Common, tasteful picks:

• multiply for darkening and shadow buildup
• screen for lightening
• overlay/soft-light for subtle contrast shaping

.panel {
  background-image:
    radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.45), transparent 65%),
    linear-gradient(180deg, #1c307d, #09164b);
  background-blend-mode: soft-light, normal;
}

The /craft page provides a clear view of the differences between the various blend modes. Simply import your CSS and then click the soft-light option between the layers on the left.

👍Read Dan Hollick's article to learn about blend modes

Shorthand

The background property can encompass all properties except blend-mode. Layers are still separated by commas, and the position and size within each layer are separated by a slash (/).

Turning off the compact switch on the CSS code block of the /craft page reveals the full representation without omitting default values.

SEO & DX notes

• Prefer CSS patterns over image textures for core UI blocks; ship fewer bytes.
• Use variables for palette stops so your tokens propagate across backgrounds.
• Keep contrast high under text; add a semi‑transparent base layer if needed.

Back to Part 1 → /blog/css-gradient-layers-foundations