TIL: CSS defines functions to repeat gradients

Today I learned a nifty and quick fact about CSS gradients. It surprised me that I didn't come across it before. CSS includes functions to define gradients as background images:

• linear-gradient
• radial-gradient
• conic-gradient

The linear, radial and conic gradients are not the only gradient functions, though. There are three very similar CSS functions that enable you to repeat a pattern in CSS.

.repeating-linear {
  background: repeating-linear-gradient(
    var(--primary) 0 1em,
    var(--secondary) 1em 2em
  );
}

.repeating-radial {
  background: repeating-radial-gradient(
    var(--primary) 0 1em,
    var(--secondary) 1em 2em
  );
}

.repeating-conic {
  background: repeating-conic-gradient(
    var(--primary) 0 36deg,
    var(--secondary) 36deg 72deg
  );
}

You can read more about these functions on MDN:

• repeating-linear-gradient()
• repeating-radial-gradient
• repeating-conic-gradient

Have a look at the devsheet below to see the difference between all these CSS functions.