CSS Pattern

powered by CSS gradients

html {
  --s: 84px; /* control the size*/
  --c1: #f2f2f2;
  --c2: #cdcbcc;
  --c3: #999999;
  
  --_g: 0 120deg,#0000 0;
  background:
    conic-gradient(from    0deg at calc(500%/6) calc(100%/3),var(--c3) var(--_g)),
    conic-gradient(from -120deg at calc(100%/6) calc(100%/3),var(--c2) var(--_g)),
    conic-gradient(from  120deg at calc(100%/3) calc(500%/6),var(--c1) var(--_g)),
    conic-gradient(from  120deg at calc(200%/3) calc(500%/6),var(--c1) var(--_g)),
    conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2)  60deg,var(--c1) var(--_g)),
    conic-gradient(from   60deg at calc(200%/3) 50%,var(--c1)  60deg,var(--c3) var(--_g)),
    conic-gradient(from  -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0 240deg,var(--c3) 0);
  background-size: calc(var(--s)*1.732) var(--s);
  /* sqrt(3) = 1.732 */
}
html {
  --s: 200px; /* control the size */
  --c1: #1d1d1d;
  --c2: #4e4f51;
  --c3: #3c3c3c;
  
  background:
    repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg) 
     calc(.5*var(--s)) calc(.5*var(--s)*0.577),
    repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);
  background-size: var(--s) calc(var(--s)*0.577);
  /* 0.577 = tan(30deg)*/
}
html {
  --s: 4em; /* control the size */

  background:
    radial-gradient(#C02942 24%,#0000 25%),
    radial-gradient(#53777A 30%,#0000 32%) calc(var(--s)/2) calc(var(--s)/2),
    repeating-conic-gradient(from 30deg,#ECD078 0 30deg,#D95B43 0 90deg);
  background-size: var(--s) var(--s); 
}
html {
  --s: 100px; /* control the size */
  --c1: #fff0e5;
  --c2: #025d8c;
  --c3: #e1642a;
  
  
  --_g: 50%,#0000 37%,var(--c1) 39% 70%,#0000 72%;
  --_t: 50%,var(--c2) 40deg,var(--c3) 0 140deg,var(--c2) 0 180deg,#0000 0; 
  --_s: 47% 50% at;
  background: 
    radial-gradient(var(--_s) -10% var(--_g)) 0 calc(var(--s)/2),
    radial-gradient(var(--_s) -10% var(--_g)) calc(var(--s)/2) 0,
    radial-gradient(var(--_s) 110% var(--_g)),
    radial-gradient(var(--_s) 110% var(--_g)) calc(var(--s)/2) calc(var(--s)/2),
    conic-gradient(from   0deg at 55% var(--_t)) calc(var(--s)/4) 0,
    conic-gradient(from 180deg at 45% var(--_t)) calc(var(--s)/4) 0,
    var(--c2);
  background-size: var(--s) var(--s);
}
html {
  --s: 150px; /* control the size */
  --c1: #f7d2a1;
  --c2: #05057e;

  --_g: 
     var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
     var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
     #0000 96%;
  background:
    radial-gradient(50% 50% at 100% 0,var(--_g)),
    radial-gradient(50% 50% at 0 100%,var(--_g)),
    radial-gradient(50% 50%,var(--_g)),
    radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
    var(--c1);
  background-size: var(--s) var(--s);
}
html {
  --s: 105px; /* control the size */
  --c1: #b9b9b9;
  --c2: #dcdcdc;
  --c3: #fafafa;

  background:
    conic-gradient(from 75deg,var(--c1)   15deg ,var(--c2) 0 30deg ,#0000 0 180deg,
                              var(--c2) 0 195deg,var(--c1) 0 210deg,#0000 0) 
       calc(0.5*var(--s)) calc(0.5*var(--s)/0.577),
    conic-gradient(var(--c1)   30deg ,var(--c3) 0 75deg ,var(--c1) 0 90deg, var(--c2) 0 105deg,
                   var(--c3) 0 150deg,var(--c2) 0 180deg,var(--c3) 0 210deg,var(--c1) 0 256deg,
                   var(--c2) 0 270deg,var(--c1) 0 286deg,var(--c2) 0 331deg,var(--c3) 0);
  background-size: var(--s) calc(var(--s)/0.577);
  /* 0.577=tan(30deg)*/
}
html {
  --s: 120px; /* control the size */
  
  background:
    conic-gradient(from 150deg at 50% 33%,#0000,#FA6900 .5deg 60deg,#0000 60.5deg) 
      calc(var(--s)/2) calc(var(--s)/1.4),
    conic-gradient(from -30deg at 50% 66%,#0000,#D95B43 .5deg 60deg,#ECD078 60.5deg);
  background-size: var(--s) calc(var(--s)/1.154);
}
html {
  --s: 100px; /* control the size */
  --c1: #4ECDC4;
  --c2: #556270;

  background: 
    linear-gradient(-26.56deg,var(--c1) 33%,var(--c2) 33.3% 66.6%,var(--c1) 67%) 
    0/var(--s) var(--s);
  /* 26.56deg = arctan(0.5) */
}
html {
  --s: 140px; /* control the size */
  
  --_g: #0000 52%,#170409 /* first color */ 54% 57%,#0000 59%; 
  background: 
   radial-gradient(farthest-side at -33.33% 50%,var(--_g)) 0 calc(var(--s)/2),
   radial-gradient(farthest-side at 50% 133.33%,var(--_g)) calc(var(--s)/2) 0,
   radial-gradient(farthest-side at 133.33% 50%,var(--_g)),
   radial-gradient(farthest-side at 50% -33.33%,var(--_g)),
   #67917A; /* second color */
  background-size: calc(var(--s)/4.667) var(--s),var(--s) calc(var(--s)/4.667);
}
html {
  --s: 100px; /* control the size */

  --_g: #00A0B0 /* first color */ 0 25%,#0000 0 50%;
  background:
   repeating-conic-gradient(at 33% 33%,var(--_g)),
   repeating-conic-gradient(at 66% 66%,var(--_g)),
   #EB6841;  /* second color */ 
  background-size: var(--s) var(--s); 
}
html {
  --s: 120px; /* control the size */
  --c1: #e7525b;
  --c2: #78dbf0;
  
  --_g: 80%,var(--c1) 25.4%,#0000 26%;
  background:
   radial-gradient(at 80% var(--_g)),
   radial-gradient(at 20% var(--_g)),
   conic-gradient(from -45deg at 50% 41%,var(--c1) 90deg,var(--c2) 0) 
      calc(var(--s)/2) 0;
  background-size: var(--s) var(--s);
}
html {
  --s: 100px; /* control the size */
  
  --_g: #ECEDDC /* first color */ 90deg,#0000 90.5deg;
  background:
   conic-gradient(from -45deg,var(--_g)),
   conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0,
   #29AB87; /* second color */
  background-size: var(--s) var(--s)
}
html {
  --s: 100px; /* control the size */
  
  --_g: #0000 90deg,#366 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g)),
    conic-gradient(from 90deg at 1px 1px,var(--_g));
  background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
}
html {
  --s: 90px; /* control the size */
  --g: 5px;  /* control the gap */

  --_g1:#0000,#e181c2 /* first  color */ 0.5deg 108deg,#0000 109deg;
  --_g2:#0000,#fff220 /* second color */ 0.5deg  36deg,#0000  37deg;
  background:
    conic-gradient(from 54deg  at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--_g1)),
    conic-gradient(from 126deg at calc(var(--s)*0.5)  calc(var(--s)*0.7) ,var(--_g1)),
    conic-gradient(from 162deg at calc(var(--s)*0.5)  0                  ,var(--_g2)),
    conic-gradient(from 90deg  at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--_g2))
    #e181c2;
  background-size: calc(var(--s) + var(--g)) calc(var(--s) + var(--g));
}
html {
  --s: 150px; /* control the size */
  --c1: #FF847C;
  --c2: #E84A5F;
  --c3: #FECEA8;
  --c4: #99B898;
  
  background:
    conic-gradient(from  45deg at 75% 75%, var(--c3) 90deg,var(--c1) 0 180deg,#0000 0),
    conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg,#0000 0),
    conic-gradient(from -45deg at 50% 100%,#0000 180deg,var(--c3) 0),
    conic-gradient(from -45deg,var(--c1) 90deg, var(--c2) 0 225deg,var(--c4) 0);
  background-size: var(--s) var(--s); 
}
html {
  --s: 222px; /* control the size */
  --c1: #7f727b;
  --c2: #d6b4c2;
  --c3: #baa0ab;
  
  --_g: var(--c1) 10%,var(--c2) 10.5% 19%,#0000 19.5% 80.5%,var(--c2) 81% 89.5%,var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%,#0000 75%;
  --_l1: linear-gradient(145deg,var(--_g));
  --_l2: linear-gradient( 35deg,var(--_g));
  background: 
    var(--_l1), var(--_l1) calc(var(--s)/2) var(--s),
    var(--_l2), var(--_l2) calc(var(--s)/2) var(--s),
    conic-gradient(var(--_c),var(--c1) 0) calc(var(--s)/8) 0,
    conic-gradient(var(--_c),var(--c3) 0) calc(var(--s)/2) 0,
    linear-gradient(90deg,var(--c3) 38%,var(--c1) 0 50%,var(--c3) 0 62%,var(--c1) 0);
  background-size: var(--s) calc(2*var(--s)/3);
}
html {
   --s: 20px; /* size of the lines */
   --g: 15px; /* gap between lines */
  
  --c1: #C02942;
  --c2: #53777A;
   
   background:
     conic-gradient(at var(--s) calc(100% - var(--s)),#0000 270deg,var(--c1) 0) calc(var(--s) + var(--g)) 0,
     linear-gradient(var(--c2) var(--s),#0000 0) 0 var(--g),
     conic-gradient(at var(--s) calc(100% - var(--s)),#0000 90deg,var(--c2) 0 180deg, var(--c1) 0),
     #ECD078;
   background-size: calc(2*(var(--s) + var(--g))) calc(2*(var(--s) + var(--g)));
}
html {
  --s: 200px; /* control the size */
  --c: #fff; /* first color */
  
  --_g: #0000 8%,var(--c) 0 17%,#0000 0 58%;
  background: 
    linear-gradient(135deg,#0000 20.5%,var(--c) 0 29.5%,#0000 0) 0 calc(var(--s)/4),
    linear-gradient( 45deg,var(--_g)) calc(var(--s)/2) 0,
    linear-gradient(135deg,var(--_g),var(--c) 0 67%,#0000 0),        
    linear-gradient( 45deg,var(--_g),var(--c) 0 67%,#0000 0 83%,var(--c) 0 92%,#0000 0),
    #1095c1; /* second color */
  background-size: var(--s) var(--s);
}
html {
  --s: 64px; /* control the size */
  --c1: #E0E4CC;
  --c2: #69D2E7;
  
  --_g: 90deg,#0000 0; 
  background:
    conic-gradient(from 135deg,var(--c1) var(--_g)) var(--s) calc(var(--s)/2),
    conic-gradient(from 135deg,var(--c2) var(--_g)),
    conic-gradient(from 135deg at 50% 0,var(--c1) var(--_g)) var(--c2); 
  background-size: calc(2*var(--s)) var(--s);
}
html {
  --s: 64px; /* control the size */
  --c1: #EB6841;
  --c2: #EDC951;
  
  background:
    conic-gradient(from -45deg,var(--c1) 90deg,#0000 0 180deg,var(--c2) 0 270deg,#0000 0)   
      0 calc(var(--s)/2)/var(--s) var(--s),    
    conic-gradient(from 135deg at 50% 0,var(--c1) 90deg,var(--c2) 0)  
      0 0/calc(2*var(--s)) var(--s); 
}
html {
  --s: 36px; /* control the size */
  --c1: #b62f31;
  --c2: #ecdacb;
  --c3: #8e1f08;
  
  --_g: calc(2*var(--s)*1.732) calc(2*var(--s)) 
    conic-gradient(from 60deg at 62.5% 50%,var(--c3) 60deg,#0000 0); 
  background:
       calc( 2.598*var(--s)/2) calc(var(--s)/ 2)/var(--_g),
       calc(-0.866*var(--s)/2) calc(var(--s)/-2)/var(--_g),
    repeating-conic-gradient(var(--c2) 0 90deg,#0000 0 180deg) 
       0 0/calc(2*var(--s)*1.732) calc(2*var(--s)),
    repeating-conic-gradient(from 60deg,var(--c1) 0 60deg,var(--c2) 0 180deg) 
       0 0/calc(var(--s)*1.732) var(--s)
}
Created by Temani Afif Buy Me A Coffee