Creating a Complex Background – Part 1

In this series of assignments, we will build a complex pattern using gradients. We will do this using the multiple background image technique.

In CSS, you can set several background images for an element at once by listing them separated by commas:

background-image:
  url('img1.png'),
  url('img2.png'),
  url('img3.png');

Likewise, you can use gradients instead of images:

background-image:
  linear-gradient(...),
  linear-gradient(...),
  linear-gradient(...);

We’ll be using gradients with transparent colors and sharp transitions. First, we will build a repeating fragment, and then we will multiply it. In this task, you will add the first two gradients, which should produce the following: