Interactive online courses HTML Academy
2026-03-09 10:59 Diff
https://htmlacademy.org/courses/advanced-styling/linear-gradients/repeating-linear-gradients

In addition to the usual gradients, we have ones that are repeating as well. Their syntax is exactly the same as the syntax used for ordinary gradients, only instead of linear-gradient, you write repeating-linear-gradient. A repeating gradient is good for creating striped backgrounds or ornamental backgrounds using CSS.

There are a few things to know about repeating gradients:

  1. The fragment size is determined by the last color stop. For the repetition to be visible, the last color stop must be smaller than the size of the element with the gradient.
  2. If the first and last gradient colors are different, you will see sharp boundaries between the repeating fragments. To get rid of them, you need to set the same first and last colors.
  3. Color stops in repeating gradients are usually specified in pixels, but percentages may also be used.

By the way, instead of repeating gradients, you can use regular gradients in combination with the background-size and background-repeat properties. But repeating gradients are easier to use and require less code.

In this assignment, we will create repeating gradients from regular gradients. Pay attention to the size of the fragments. For example, exactly four fragments will fit into the first two blocks.