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.

.demo-bg {
  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:

.demo-bg {
  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… */

Positioning layers

Use keywords (left, center, right, top, bottom), lengths, or percentages. With two values, the first is the x‑axis, the second is the y‑axis. You can also anchor using the at syntax inside radial/conic gradients.

/* Corner blooms */
background-image:
  radial-gradient(farthest-side at 0% 0%, rgba(120,180,255,.25), transparent 60%),
  radial-gradient(farthest-side at 100% 100%, rgba(120,180,255,.2), transparent 60%),
  linear-gradient(180deg, #1c307d, #09164b);
background-repeat: no-repeat;

Preview:

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.

/* 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 */

Preview (vertical pinstripes):

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 */

Preview by scrolling

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.

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