How to create background with triangle shapes?

Question

As shown in the image above, there are triangles in the background of similar but varying shades of color.

I managed to get the same color which is

#4C27B3

https://codepen.io/JoyFulCoding/pen/EzXowL

How can this effect be achieved using CSS?

Answer 1

You can consider multiple background to achieve this but it seems a random background so you will have to use many layer.

Here an example in case you want to have a repeated pattern.

I will use different color so you can easily understand the shape:

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient( 45deg, red    calc(0.7072 * 50px),transparent 0),
    linear-gradient( 45deg, black  calc(0.7072 * 50px),transparent 0)  50px -50px,
    linear-gradient(-45deg, blue   calc(0.7072 * 50px),transparent 0),
    linear-gradient(-45deg, orange calc(0.7072 * 50px),transparent 0) -50px -50px,
    linear-gradient(-225deg,green  calc(0.7072 * 50px),transparent 0),
    linear-gradient(-225deg,pink   calc(0.7072 * 50px),transparent 0)  50px  50px,
    linear-gradient(225deg, yellow calc(0.7072 * 50px),transparent 0),
    linear-gradient(225deg ,purple calc(0.7072 * 50px),transparent 0) -50px  50px;
    
  background-size:100px 100px;
}

You can then optimize it using CSS variables:

body {
  --d:100px; /* Dimension */
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.707 = cosinus(45deg)*/
  background:
    linear-gradient( 45deg, red    var(--g)),
    linear-gradient( 45deg, black  var(--g))  calc(1 * var(--d)/2) calc(-1 * var(--d)/2),
    linear-gradient(-45deg, blue   var(--g)),
    linear-gradient(-45deg, orange var(--g))  calc(-1 * var(--d)/2) calc(-1 * var(--d)/2),
    linear-gradient(-225deg,green  var(--g)),
    linear-gradient(-225deg,pink   var(--g))  calc(1 * var(--d)/2)  calc(1 * var(--d)/2),
    linear-gradient(225deg, yellow var(--g)),
    linear-gradient(225deg ,purple var(--g))  calc(-1 * var(--d)/2)  calc(1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  margin:0;
  height:100vh;
}

Finally you can use a hsl() coloration to create a pattern from the same color like you want:

body {
  --d:100px; /* Dimension */
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.7072 = cosinus(45deg)*/
  --c:256, 64%; /* Base color */
  background:
    linear-gradient( 45deg, hsl(var(--c),20%)  var(--g)),
    linear-gradient( 45deg, hsl(var(--c),25%)  var(--g))  calc( 1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-45deg, hsl(var(--c),27%)  var(--g)),
    linear-gradient(-45deg, hsl(var(--c),32%)  var(--g))  calc(-1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-225deg,hsl(var(--c),30%)  var(--g)),
    linear-gradient(-225deg,hsl(var(--c),22%)  var(--g))  calc( 1 * var(--d)/2)  calc( 1 * var(--d)/2),
    linear-gradient(225deg, hsl(var(--c),40%)  var(--g)),
    linear-gradient(225deg ,hsl(var(--c),42%)  var(--g))  calc(-1 * var(--d)/2)  calc( 1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  margin:0;
  height:100vh;
}

---

You can now easily have any kind of background:

.box {
  --d:100px; /* Dimension */
   --c:256, 64%; /* Base color */
   
   
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.7072 = cosinus(45deg)*/
  background:
    linear-gradient( 45deg, hsl(var(--c),20%)  var(--g)),
    linear-gradient( 45deg, hsl(var(--c),25%)  var(--g))  calc( 1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-45deg, hsl(var(--c),27%)  var(--g)),
    linear-gradient(-45deg, hsl(var(--c),32%)  var(--g))  calc(-1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-225deg,hsl(var(--c),30%)  var(--g)),
    linear-gradient(-225deg,hsl(var(--c),22%)  var(--g))  calc( 1 * var(--d)/2)  calc( 1 * var(--d)/2),
    linear-gradient(225deg, hsl(var(--c),40%)  var(--g)),
    linear-gradient(225deg ,hsl(var(--c),42%)  var(--g))  calc(-1 * var(--d)/2)  calc( 1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  width:200px;
  height:200px;
  display:inline-block;
}

<div class="box" style="--d:50px;--c:120,20%"></div>
<div class="box" style="--d:70px;--c:20,80%"></div>
<div class="box" style="--d:20px;--c:10,20%"></div>
<div class="box" style="--d:30px;--c:220,20%"></div>

---

In the near future you can do the same with less code using conic-gradient.

^{The below code works only on chrome}

.box {
  --d:100px; /* Dimension */
   --c:256, 64%; /* Base color */
   
  background:
    conic-gradient(hsl(var(--c),20%) 0.125turn,
                   hsl(var(--c),32%) 0.125turn 0.25turn,
                   hsl(var(--c),27%) 0.25turn  0.375turn,
                   hsl(var(--c),42%) 0.375turn 0.5turn ,
                   hsl(var(--c),30%) 0.5turn   0.625turn,
                   hsl(var(--c),22%) 0.625turn 0.75turn ,
                   hsl(var(--c),40%) 0.75turn  0.875turn,
                   hsl(var(--c),25%) 0.875turn 1turn)
    0 0/var(--d) var(--d);
  
  width:200px;
  height:200px;
  display:inline-block;
}

<div class="box" style="--d:50px;--c:120,20%"></div>
<div class="box" style="--d:70px;--c:20,80%"></div>
<div class="box" style="--d:20px;--c:10,20%"></div>
<div class="box" style="--d:30px;--c:220,20%"></div>