Building a background gradient with tiles

Question

I'm trying to acheive the following background in html/css:

I searched for ways to make gradients already but i only found smooth gradients, couldn't find tiles-based gradients. I decided to try making this gradient with flexboxes (see the following snippet:

div.s-t-numbers-background {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
div.s-t-numbers-background-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
div.s-t-numbers-background-tile {
  background-color: #FFFAAA;
  width: 100%;
  height: 100%;
}

<div class="s-t-numbers-background">
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
  <div class='s-t-numbers-background-column'>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
    <div class='s-t-numbers-background-tile'>tile</div>
  </div>
</div>

The upper-left color is: #8e003f and the lower-right color is: #f02435 Iwould be happy to avoid doing this with divs and use CSS if anyone has a trick to do this.

Answer 1

customize your colors and positions on your own. Im afraid that this dont have large support acros browsers. Mentioned background image would be much better (you can have 6x4px png, size of such file is not big)

div{
  width:160px;
  height: 240px;
  border:1px solid;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='6'><rect fill='#8e003f' x='0' y='0' width='1' height='1'/><rect fill='#8e003e' x='0' y='1' width='1' height='1'/><rect fill='#8e003d' x='0' y='2' width='1' height='1'/><rect fill='#8e003c' x='0' y='3' width='1' height='1'/><rect fill='#8e003b' x='0' y='4' width='1' height='1'/><rect fill='#8e003a' x='0' y='5' width='1' height='1'/><rect fill='#8e003f' x='1' y='0' width='1' height='1'/><rect fill='#9e003d' x='1' y='1' width='1' height='1'/><rect fill='#Ae003b' x='1' y='2' width='1' height='1'/><rect fill='#Ce0038' x='1' y='3' width='1' height='1'/><rect fill='#f02437' x='1' y='4' width='1' height='1'/><rect fill='#f02435' x='1' y='5' width='1' height='1'/><rect fill='#8e003f' x='2' y='0' width='1' height='1'/><rect fill='#Ae003d' x='2' y='1' width='1' height='1'/><rect fill='#C0243b' x='2' y='2' width='1' height='1'/><rect fill='#D02439' x='2' y='3' width='1' height='1'/><rect fill='#E02437' x='2' y='4' width='1' height='1'/><rect fill='#f02435' x='2' y='5' width='1' height='1'/><rect fill='#a0243a' x='3' y='0' width='1' height='1'/><rect fill='#b02439' x='3' y='1' width='1' height='1'/><rect fill='#c02438' x='3' y='2' width='1' height='1'/><rect fill='#d02437' x='3' y='3' width='1' height='1'/><rect fill='#e02436' x='3' y='4' width='1' height='1'/><rect fill='#f02435' x='3' y='5' width='1' height='1'/></svg>");
  background-size: 100%;
}

<div></div>