<header>
  <div class="wrap">
    <h1>Linear-gradient</h1>  
    <p>Patterns with 
      <a href="https://css-doodle.com" target="_blank">css-doodle</a> 
      and CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient" target="_blank">linear-gradient()</a>.
    </p>
  </div>
</header>

<ul class="patterns">
  
<li>
  <css-doodle grid="1x15" #1>
    background-image: repeating-linear-gradient(
      calc(@pn(45deg, -45deg)),
      @multi(15, (
        @p(#ED7B4E, #E3363A, #3B120E, #EDEED1, #4CAABE)
          calc(@n() * 100% / 15),
        @lp()
          calc((@n() + 1) * 100% / 15)
      ))
    );
  </css-doodle>
</li>

<li>
  <css-doodle grid="1x20" #2>
    :container {
      transform: rotate(45deg) translate(-25%);
      will-change: transform;
      @size: 150%;
    }
    background-image: repeating-linear-gradient(
      @pd(120deg, -120deg),
      @multi(@calc(@size() * 2), (
        @pd(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1)
          calc(@n() * 100% / (@size() * 2)),
        @lp()
          calc((@n() + 1) * 100% / (@size() * 2))
      ))
    );
  </css-doodle>
</li>

<li>
  <css-doodle grid="10" #3>
    :container {
      transform: scale(2) rotateY(-45deg) rotate(-45deg);
      will-change: transform;
    }
    background: @multi(5, (
      linear-gradient(
        @pd(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1), @lp()
      ) 50% 50% / @pn(30%, 55%, 70%, 85%, 100%) @lp() no-repeat
    ));
  </css-doodle>
</li>

<li>
  <css-doodle grid="1x15" #4>
    background-image: repeating-linear-gradient(
      @multi(@size(), (
        @pd(#ED7B4E, #E3363A, #3B120E, #EDEED1, #4CAABE)
          calc((@n() - 1) * 100% / @size()),
        @lp()
          calc(@n() * 100% / @size())
      ))
    );
    background-size: 100% 80%;
    background-position: 0 calc(@i() * @i() * -100% / 80);
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #5>
    --p: @pn(0 100%, 0 0, 100% 100%, 100% 0);
    background:
      @multi(5, (
        linear-gradient(@p(#4CAABE, #EDEED1, #ED7B4E, #3B120E, #E3363A), @lp()) 
          var(--p) / @pn(20%, 40%, 60%, 80%, 100%) @lp() no-repeat
      ))
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #6>
    background: @multi(5, linear-gradient(
      -135deg,
      @p(#ED7B4E, #E3363A, #3B120E, #4CAABE) 50%,
      #EDEED1 50%
    ));
    background-size: 25% 25%, 25% 25%, 25% 25%, 50% 50%, 100% 100%;
    background-position: 66.66% 100%, 0 33.33%, 0 100%, 0 100%, 100% 0;
    background-repeat: no-repeat;
    transform: rotateY(@p(180deg, 0deg)) rotateX(@p(180deg, 0deg));
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #7>
    :container {
      transform: rotate(45deg) scale(1.5);
      will-change: transform;
    }
    background: @multi(10, (
      linear-gradient(@p(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1), @lp())
      100% 100% / calc(@n() * 10%) calc(@n() * 10%) no-repeat
    ))
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #8>
    transform: rotate(@p(45deg, -45deg)) scale(1.5);
    will-change: transform;
    background: linear-gradient(
      @p(#ED7B4E, #E3363A, #3B120E, #4CAABE) 50%,
      #EDEED1 50%
    ) 0 0 / 100% @r(10%, 100%);
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #9>
    --s: @r(15%, 85%);
    --t: calc(100% - var(--s));
    background: @multi(2,
      linear-gradient(@p(#ED7B4E, #E3363A, #3B120E, #4CAABE), @lp())
    );
    background-color: #EDEED1;
    background-size: var(--s) var(--s), var(--t) var(--t);
    background-position: 0 0, 100% 100%;
    background-repeat: no-repeat;
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #10>
    background: @multi(2, (
      linear-gradient(
        @p(45deg, -45deg),
        @multi(2, @p(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1) 50%)
      )
        @p(100% 100%, 0 100%, 100%, 0 0) / 
        calc(@n() * 100% / 2) calc(@n() * 100% / 2) no-repeat
    ))
  </css-doodle>
</li>

<li>
  <css-doodle grid="8" #11>
    margin: -20%;
    transform: rotate(@r(-2deg, 2deg));
    mix-blend-mode: @p(color-burn, hard-light);
    background-blend-mode: @p(color-burn, hard-light);
    background: linear-gradient(
      @multi(2, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%)
    );
    @random(.5) {
      background:
        linear-gradient(@p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%, transparent 50%) 
          0 0 / 100% @r(20%),
        linear-gradient(
          @multi(2, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%)
        );
    }
  </css-doodle>
</li>

<li>
  <css-doodle grid="14" #12>
    :container {
      transform: scale(2) rotateY(-45deg) rotate(-45deg);
      will-change: transform;
    }
    background: linear-gradient(45deg,
      @multi(2, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%)
    );
    mix-blend-mode: @p(color-burn, screen);
    margin: -25%;
  </css-doodle>
</li>
  
</ul>
:root { 
  --size: 15em; 
}

html, body, ul, li, header, h1, p { 
  margin: 0; 
  padding: 0;
}

body { 
  background: #f3f2eb; 
  font-family:  /* songti */ 
    Georgia, 
    "Nimbus Roman No9 L", 
    "Songti SC", 
    STSong, 
    "AR PL New Sung", 
    "AR PL SungtiL GB", 
    NSimSun, 
    SimSun, 
    "TW\-Sung", 
    "WenQuanYi Bitmap Song", 
    "AR PL UMing CN", 
    "AR PL UMing HK", 
    "AR PL UMing TW", 
    "AR PL UMing TW MBE", 
    PMingLiU, MingLiU, 
    serif;
}

header {
  color: #3B120E; 
  padding: 10vmin 0 2vmin;
  position: relative;
  overflow: hidden;
}

header a {
  color: #3b120e;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) center 100% / 100% 15% no-repeat;
  transition: .2s ease;
}

header a:hover {
  color: #E3363A;
  background-size: 100% 20%;
}

header p {
  margin-top: .5em; 
  color: #3B120E7a; 
}

.wrap, .patterns {
  max-width: 67.5em;
  margin: 0 auto;
  padding: 0 1.5em;
  box-sizing: border-box; 
}

.patterns { 
  list-style: none;
  width: 100%; 
  margin: 6vmin auto 10vmin;
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr)); 
  grid-gap: 1vmin; 
}

ul li { 
  width: 100%; 
  height: 0; 
  padding-top: 100%; 
  position: relative; 
}

.patterns css-doodle { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  overflow: hidden; 
  cursor: pointer;
}

@media screen and (max-width: 36.25em) { 
  :root { 
    --size: 8em; 
  } 
}
document.addEventListener('click', e => e.target.update && e.target.update());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.8/css-doodle.min.js