В этой серии заданий мы построим сложный узор с помощью градиентов. Делать это мы будем с помощью техники множественных фоновых изображений.

В CSS можно задавать элементу сразу несколько фоновых картинок, перечисляя их через запятую:

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

Точно так же вместо картинок можно использовать градиенты:

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

Мы будем использовать градиенты с прозрачными цветами и резкими переходами. Сначала мы построим повторяющийся фрагмент, а затем размножим его. В этом задании вы добавите первые два градиента и получиться у вас должно следующее: