index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Pattern: Fancy backgrounds with CSS gradients</title>
    <link rel="icon" href="fav.png" sizes="any">
    <meta name="monetization" content="$ilp.uphold.com/BKQpnDKX3xwQ">
    <meta name="description" content="A collection of 100+ background patterns powered by CSS gradients. All the best CSS Patterns are here! Made by Temani Afif">
    <meta name="author" content="Temani Afif">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <link rel=canonical href="https://css-pattern.com" >
    <meta property="og:locale" content="en_US" />
    <meta property="og:title" content="CSS Pattern: Fancy backgrounds with CSS gradients">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://css-pattern.com">
    <meta property="og:description" content="A collection of 100+ background patterns powered by CSS gradients. All the best CSS Patterns are here! Made by Temani Afif">
    <meta property="og:image" content="https://css-pattern.com/css-pattern.png">
    <meta property="og:image:width" content="1600" />
    <meta property="og:image:height" content="800" />
    <style>html{font-weight:400;font-size:18px;line-height:1.5;color:#415462;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";scroll-snap-type:y mandatory;}html:has(section:target){scroll-snap-type:none}body{margin:0;display:flex;flex-wrap:wrap}section{display:grid;place-content:center;min-height:50vh;scroll-snap-align:start;flex:35%;background:repeating-linear-gradient(-45deg,#fff 0 20px,#f4f4f4 0 40px);padding-inline:2rem;}@media (max-width:750px){section{flex:100%}}section:target{min-height:100vh;flex:100%}html:has(section:target) section:not(:target),html:has(section:target) header :is(h2,p:last-child){display:none}html:has(section:target) header{display:none}h1 span:nth-child(2):after,h1 span:nth-child(2):before{content:"";border-left:1.5px solid #fff;position:absolute}h1{font-style:normal;font-weight:700;font-size:50px;font-family:Montserrat,sans-serif;line-height:56px;height:61px;margin:5px;text-transform:none;letter-spacing:-2px;color:#505050;white-space:nowrap}h1 span{font-size:70px;vertical-align:middle}h1 span:first-child{letter-spacing:-14px}h1 span:nth-child(2){position:relative;letter-spacing:-15px;z-index:1}h1 span:nth-child(3){color:#c39f76;filter:blur(2px)}h1 span:nth-child(2):before{top:10px;height:28px;border-top:1.5px solid #fff;width:44px;left:2px;border-top-left-radius:41px 24px}h1 span:nth-child(2):after{bottom:0;left:4.5px;height:37px;z-index:5}header{text-align:center;flex:100%;scroll-snap-align:start;background:repeating-linear-gradient(-45deg,#fff 0 20px,#fafafa 0 40px)}header h1 + p{text-indent:120px;margin-top:-22px;font-size:15px}header p:last-child{max-width:540px;margin:auto;font-size:18px;margin-bottom:1em;}header h2{font-size:1.3rem;text-transform:capitalize;margin:1.2em auto 0.2em;color:#24333e;}section :is(button,a){border-radius:5px;box-shadow:0 .125rem 1rem rgb(27 40 50 / 4%),0 .125rem 2rem rgb(27 40 50 / 8%),0 0 0 .0625rem rgb(27 40 50 / 2%);opacity:.85;margin:1em;border:none;font-size:1rem;padding:.85rem 1.5rem;cursor:pointer}section a{background:#1095c1;color:#fff;text-decoration:none;display:inline-block;margin:0.2em}section iframe{display:block;margin:auto;overflow:hidden!important;border:none;clip-path:inset(2px);max-width:100%;}section :is(button,a):hover{opacity:1}section style{display:inline-block;font-size:0;line-height:1.4;cursor:text;white-space:pre}a.tweet{background-color:#1095c1;border-radius:50%;display:grid;place-content:center;position:fixed;bottom:124px;box-shadow:rgb(0 0 0 / 40%) 0 4px 8px}section div{text-align:center;text-wrap:balance;}section div p{font-size:1.6rem;font-weight:500}#bmc-wbtn,a.tweet{left:15px;width:52px;height:52px}#bmc-wbtn,.credit{position:fixed;background:#1095c1;}.credit{z-index:99;top:0;left:0;transform-origin:right top;transform:translate(-30%) rotate(-45deg);color:#fff;box-shadow:0 0 0 50px #1095c1;clip-path:inset(0 -100%);text-decoration:none}@media (max-width:500px){.credit{display:none;}}#bmc-wbtn{bottom:60px;display:grid;place-content:center;border-radius:50%;box-shadow:rgba(0,0,0,.4) 0 4px 8px}#bmc-wbtn img{height:40px;width:40px}</style>
  </head>
  <body>
  	<header>
  		<h1><span>C</span><span>S</span><span>S</span> Pattern</h1>
  		<p>powered by CSS gradients</p>
        <h2>the biggest collection of background Patterns</h2>
        <p>Explore 145 CSS-only patterns made with CSS gradients and optimized with CSS variables.<br> I also have <a href="https://animated.css-pattern.com/" target="_blank">a collection of animated CSS Patterns</a></p>
  	</header>
    <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
    <div class="adaptive" data-ea-publisher="css-challengescom" id="css-pattern" data-ea-type="text" data-ea-style="fixedfooter"></div>
  <section id="g1">
      <style>#g1 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g2">
      <style>#g2 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g3">
      <style>#g3 {
  --s: 72px; /* 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); 
}
</style><button>Copy the CSS</button>  
    </section>
       <section id="g4">
      <style>#g4 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section  id="g5">
      <style>#g5 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section  id="g6">
      <style>#g6 {
  --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)*/
}
</style><button>Copy the CSS</button>  
    </section>
    <section  id="g7">
      <style>#g7 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g8">
      <style>#g8 {
  --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) */
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g9">
      <style>#g9 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g10">
      <style>#g10 {
  --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); 
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g11">
      <style>#g11 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
        <section id="g12">
      <style>#g12 {
  --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)
}
</style><button>Copy the CSS</button>  
    </section>
        <section id="g13">
      <style>#g13 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
        <section id="g14">
      <style>#g14 {
  --s: 90px; /* control the size */
  --d: 5px;  /* control the gap between stars */
  
  --_g: #fff220 36deg, #0000 0;   
  background:
    conic-gradient(from 162deg at calc(var(--s) * .5)  calc(var(--s) * .68), var(--_g)),
    conic-gradient(from 18deg  at calc(var(--s) * .19) calc(var(--s) * .59), var(--_g)),
    conic-gradient(from 306deg at calc(var(--s) * .81) calc(var(--s) * .59), var(--_g)),
    #e181c2;
  background-position: 0 calc(var(--s) * 0.35);
  background-size: calc(var(--s) + var(--d)) calc(var(--s) + var(--d));
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>Don't know which Pattern to use? <br>Let me pick one for you!</p>
            <a href="https://random.css-pattern.com/" target="_blank">Get a nice CSS Pattern</a>
        </div>
    </section>
        <section id="g15">
      <style>#g15 {
  --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); 
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g16">
      <style>#g16 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g17">
      <style>#g17 {
   --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)));
}
</style><button>Copy the CSS</button>  
    </section>
        <section id="g18">
      <style>#g18 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g19">
      <style>#g19 {
  --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);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g20">
      <style>#g20 {
  --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); 
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g21">
      <style>#g21 {
  --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)
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g22">
      <style>#g22 {
  --s: 125px; /* control the size */
  --c1: #F8CA00;
  --c2: #BD1550;
  
  --_g: var(--c1) 90deg,var(--c2) 0 135deg,#0000 0;
  background:
    conic-gradient(from  -45deg at calc(100%/3)   calc(100%/3)  ,var(--c1) 90deg,#0000 0 ),
    conic-gradient(from -135deg at calc(100%/3)   calc(2*100%/3),var(--_g)),
    conic-gradient(from  135deg at calc(2*100%/3) calc(2*100%/3),var(--_g)),
    conic-gradient(from   45deg at calc(2*100%/3) calc(100%/3)  ,var(--_g),var(--c1) 0 225deg,var(--c2) 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g23">
      <style>#g23 {
  --s: 120px; /* control the size */
  
  --_c: #72e21f /* color 1 */ 25%,#0000 0;
  --_g1: conic-gradient(at 62.5% 12.5%,var(--_c));
  --_g2: conic-gradient(at 87.5% 62.5%,var(--_c));
  --_g3: conic-gradient(at 25%   12.5%,var(--_c));
  background:
    var(--_g1) calc( var(--s)/-8) calc(var(--s)/2),var(--_g1) calc(-3*var(--s)/8) calc(var(--s)/4),
    var(--_g2) calc(3*var(--s)/8) calc(var(--s)/4),var(--_g2) calc(  var(--s)/-8) 0,
    var(--_g3) 0 calc(var(--s)/-4),var(--_g3) calc(var(--s)/-4) 0,
    conic-gradient(at 87.5% 87.5%,var(--_c)) calc(var(--s)/8) 0
    #044012; /* color 2 */
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	   <section id="g24">
      <style>#g24 {
  --s: 170px; /* control the size*/
  
  --_c: #0000 75%,#3B8686 0; /* color 1 */
  --_g1: conic-gradient(at 20.71% 50%,var(--_c));
  --_g2: conic-gradient(at 50% 20.71%,var(--_c));
  background:
    var(--_g1) calc(var(--s)/ 6.828) calc(var(--s)/2),var(--_g1) calc(var(--s)/-2.828) 0,
    conic-gradient(from   45deg at 29.29% 29.29%,var(--_c)) calc(var(--s)/-6.828) 0,
    var(--_g2) calc(var(--s)/2) calc(var(--s)/-2.828),var(--_g2) 0 calc(var(--s)/ 6.828),
    conic-gradient(from -135deg at 29.29% 70.71%,var(--_c)) calc(var(--s)/-6.828) 0,
    #CFF09E /* color 2 */;
  background-size: var(--s) var(--s), var(--s) var(--s), calc(var(--s)/2) calc(var(--s)/2);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g25">
      <style>#g25 {
  --s: 76px; /* control the size */
  --c1: #F6D86B;
  --c2: #F10C49;
  
  background:
    conic-gradient(
      var(--c2)   63.43deg ,var(--c1) 0 116.36deg,
      var(--c2) 0 180deg   ,var(--c1) 0 243.43deg,
      var(--c2) 0 296.15deg,var(--c1) 0);
  background-size: calc(2*var(--s)) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g26">
      <style>#g26 {
  --s: 40px; /* control the size */
  
  --_c: #0000 75%,#C0D860 0; /* color 1 */
  --_g1: conic-gradient(at 10% 50%,var(--_c));
  --_g2: conic-gradient(at 50% 10%,var(--_c));
  background:
    var(--_g1),
    var(--_g1) calc(1*var(--s)) calc(3*var(--s)),
    var(--_g1) calc(2*var(--s)) calc(1*var(--s)),
    var(--_g1) calc(3*var(--s)) calc(4*var(--s)),
    var(--_g1) calc(4*var(--s)) calc(2*var(--s)),
    var(--_g2) 0                calc(4*var(--s)),
    var(--_g2) calc(1*var(--s)) calc(2*var(--s)),
    var(--_g2) calc(2*var(--s)) 0,
    var(--_g2) calc(3*var(--s)) calc(3*var(--s)),
    var(--_g2) calc(4*var(--s)) calc(1*var(--s)),
    #604848; /* color 2 */
  background-size: calc(5*var(--s)) calc(5*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g27">
      <style>#g27 {
  --s: 65px; /* control the size */
  --c1: #dadee1;
  --c2: #4a99b4;
  --c3: #9cceb5;
  
  --_c: 75%,var(--c3) 52.72deg,#0000 0;
  --_g1: conic-gradient(from -116.36deg at 25% var(--_c));
  --_g2: conic-gradient(from   63.43deg at 75% var(--_c));
  background:
    var(--_g1), var(--_g1) calc(3*var(--s)) calc(var(--s)/2),
    var(--_g2), var(--_g2) calc(3*var(--s)) calc(var(--s)/2),
    conic-gradient(
      var(--c2)   63.43deg ,var(--c1) 0 116.36deg,
      var(--c2) 0 180deg   ,var(--c1) 0 243.43deg,
      var(--c2) 0 296.15deg,var(--c1) 0);
  background-size: calc(2*var(--s)) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g28">
      <style>#g28 {
  --s: 82px; /* control the size */
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;
  
  --_g: var(--c3) 0 120deg,#0000 0;
  background:
    conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
    conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
    conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
    linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                          var(--c1) 0 calc(500%/6),var(--c2) 0);
  background-size: calc(1.732*var(--s)) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g29">
      <style>#g29 {
  --s: 50px; /* control the size */
  --c1: #0B2E59;
  --c2: #0D6759;
  
  background:
    conic-gradient(at 25% 25%,#0000 75%,var(--c1) 0) var(--s) var(--s),
    repeating-conic-gradient(at 25% 25%,var(--c1) 0 25%,var(--c2) 0 50%);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g30">
      <style>#g30 {
  --s: 100px;   /* control the size */
  --c: #1BB0CE; /* first color */
  
  --_g1: 
    var(--c)   calc(25%/3) ,#0000 0 calc(50%/3),
    var(--c) 0 25%         ,#0000 0 75%,
    var(--c) 0 calc(250%/3),#0000 0 calc(275%/3),
    var(--c) 0;
  --_g2: 
    #0000   calc(25%/3) ,var(--c) 0 calc(50%/3),
    #0000 0 calc(250%/3),var(--c) 0 calc(275%/3),
    #0000 0;
  background:
    linear-gradient( 45deg,var(--_g2)),linear-gradient( 45deg,var(--_g1)),
    linear-gradient(-45deg,var(--_g2)),linear-gradient(-45deg,var(--_g1))
    #DAD6CA; /* second color */
  background-position: 0 0,var(--s) var(--s);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g31">
      <style>#g31 {
  --s: 100px; /* control the size */
  --c1: #C3CCAF;
  --c2: #67434F;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
  --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
  background:
    calc( .9*var(--s)) calc( .9*var(--s))/var(--_p),
    calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
    calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),
    calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
    conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0) 
     0 0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g32">
      <style>#g32 {
  --s: 106px; /* control the size */
  --c1: #EAFDE6;
  --c2: #519548;
  
  background:
    conic-gradient(from  30deg at 87.5% 75%,var(--c1)  60deg,var(--c2) 0 120deg,#0000 0) 0 calc(.2165*var(--s)),
    conic-gradient(from -90deg at 50%   25%,var(--c2)  60deg,var(--c1) 0 180deg,#0000 0),
    conic-gradient(from  90deg at 50%   75%,var(--c2) 120deg,var(--c1) 0 180deg,#0000 0),
    conic-gradient(from -30deg at 87.5% 50%,var(--c2) 120deg,var(--c1) 0 240deg,#0000 0),
    conic-gradient(from  90deg at 37.5% 50%,var(--c2) 120deg,var(--c1) 0 180deg,var(--c2) 0 240deg,var(--c1) 0);
  background-size: var(--s) calc(.866*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g33">
      <style>#g33 {
  --s: 30px; /* control the size */
  
  --_c: #5E9FA3;
  background:
    conic-gradient(at 50% calc(100%/6),var(--_c) 60deg,#0000 0),
    conic-gradient(at calc(100%/6) 50%,#0000 240deg,var(--_c) 0),
    conic-gradient(from 180deg at calc(100%/6) calc(500%/6),var(--_c) 60deg,#0000 0),
    conic-gradient(from 180deg at calc(500%/6),#0000 240deg,var(--_c) 0) calc(4*.866*var(--s)) 0,
    repeating-linear-gradient(-150deg,#B05574 0 calc(100%/6),#0000   0 50%),
    repeating-linear-gradient(-30deg, #B39C82 0 calc(100%/6),#DCD1B4 0 50%);
  background-size: calc(6*.866*var(--s)) calc(3*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g34">
      <style>#g34 {
  --s: 60px; /* control the size */
  
  --_g: #0000 83%,#b09f79 85% 99%,#0000 101%;
  background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    #476074;
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g35">
      <style>#g35 {
  --s: 80px; /* the size */
  --c: #5E8C6A;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g: 35.36% 35.36% at;
  --_c: #0000 66%,#BFB35A 68% 70%,#0000 72%;
  background:
    radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
    radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
    radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
    repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s),
    radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
    var(--c);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g36">
      <style>#g36 {
  --s: 150px; /* control the size */
  --c1: #CCBF82;
  --c2: #604848;
  
  --_g: var(--c1)        6.25%,var(--c2)  6.3% 18.75%,var(--c1) 18.8% 31.25%,
        var(--c2) 31.3% 43.75%,var(--c1) 43.8% 56.25%,var(--c2) 56.3% 68.75%,#0000 0;
  background:
    radial-gradient(var(--s) at 100% 0   ,var(--_g)),
    radial-gradient(var(--s) at 0    0   ,var(--_g)),
    radial-gradient(var(--s) at 0    100%,var(--_g)),
    radial-gradient(var(--s) at 100% 100%,var(--_g)) var(--c1);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g37">
      <style>#g37 {
  --s: 150px; /* control the size */
  
  --_g: #0000 90deg,#046D8B 0;
  background:
    conic-gradient(from 116.56deg at calc(100%/3) 0   ,var(--_g)),
    conic-gradient(from -63.44deg at calc(200%/3) 100%,var(--_g))
    #2FB8AC;
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g38">
      <style>#g38 { 
  --s: 60px; /* control the size */
  --c1: #ffdc56;
  --c2: #fe6601;
  --c3: #803201;
  
  --_s: calc(2*var(--s)) calc(2*var(--s));
  --_g1: var(--_s) conic-gradient(at calc(500%/6) 50%,var(--c3) 25%,#0000 0);
  --_g2: var(--_s) conic-gradient(at calc(200%/3) 50%,var(--c2) 25%,#0000 0);
  background:
    var(--s) var(--s)/var(--_g1),0 0/var(--_g1),
    var(--s) var(--s)/var(--_g2),0 0/var(--_g2),
    repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%) 0 0/var(--_s),
    linear-gradient(var(--c1) calc(100%/3),var(--c2) 0 calc(200%/3),var(--c3) 0)
     0 0/var(--s) var(--s); 
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>What about a nice CSS Loader?</p>
            <iframe title="A random CSS loader" width="300" height="150" src="https://random.css-loaders.com"></iframe>
            <a href="https://css-loaders.com" target="_blank">Get more CSS loaders</a>
        </div>
    </section>
	  <section id="g39">
      <style>#g39 {
  --s: 50px; /* control the size */
  
  --_g: conic-gradient(at 50% 25%,#0000 75%,#f86466 0);
  background:
    var(--_g),var(--_g) var(--s) var(--s),
    var(--_g) calc(2*var(--s)) calc(2*var(--s)),
    var(--_g) calc(3*var(--s)) calc(3*var(--s)),
    repeating-linear-gradient(135deg,#000 0 12.5%,#fff 0 25%);
  background-size: calc(4*var(--s)) calc(4*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g40">
      <style>#g40 {
  --s: 100px; /* control the size */
  --c1: #668284;
  --c2: #B6D8C0;
  --c3: #B9D7D9;
  
  --_g: #0000, var(--c1) 1deg 30deg,var(--c2) 31deg 89deg,var(--c1) 90deg 119deg,#0000 120deg;
  background:
    conic-gradient(from -60deg at 50% 28.86%,var(--_g)),
    conic-gradient(from  30deg at 71.14% 50%,var(--_g)),
    conic-gradient(from 120deg at 50% 71.14%,var(--_g)),
    conic-gradient(from 210deg at 28.86% 50%,var(--_g))
    var(--c3);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g41">
      <style>#g41 {
  --s: 100px; /* control the size */
  
  --_g: #FCD036 0 100%,#0000 102%;
  background:
    conic-gradient(#0000 75%,var(--_g)) calc(var(--s)/4) calc(var(--s)/4),
    radial-gradient(65% 65% at 50% -50%,var(--_g)),
    radial-gradient(65% 65% at -50% 50%,var(--_g)),
    radial-gradient(65% 65% at 50% 150%,var(--_g)),
    radial-gradient(65% 65% at 150% 50%,var(--_g))
    #987F69;
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g42">
      <style>#g42 {
  --s: 76px; /* control the size */
  --c1: #F77825;
  --c2: #60B99A;
  --c3: #F1EFA5;
  --c4: #554236;
  
  background:
    conic-gradient(from 150deg,var(--c1)    60deg,#0000 0 180deg,
                               var(--c2) 0 240deg,#0000 0) var(--s) 0,
    conic-gradient(from -30deg,var(--c1)    60deg,var(--c3) 0 120deg,var(--c4) 0 180deg,
                               var(--c2) 0 240deg,var(--c3) 0 300deg,var(--c4) 0);
  background-size: calc(2*var(--s)) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g43">
      <style>#g43 {
  --s: 76px; /* control the size */

  --c: #1a144a;
  --_g: conic-gradient(var(--c) 25%,#0000 0) 0 0;
  background:
    var(--_g)/calc(2*var(--s)) calc(var(--s)/9.5),
    var(--_g)/calc(var(--s)/9.5) calc(2*var(--s)),
    repeating-conic-gradient(#0000 0 25%,var(--c) 0 50%) 
     var(--s) 0 /calc(2*var(--s)) calc(2*var(--s)),
    radial-gradient(50% 50%,#2eb044 98%,var(--c)) 
     0 0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g44">
      <style>#g44 {
  --s: 162px; /* control the size */
  
  --_g: conic-gradient(from 30deg at 50% 25%,#0000 300deg,#cd2942 0);
  background:
    var(--_g) calc(0.2885*var(--s)) calc(7*var(--s)/12),
    var(--_g) 0 calc(var(--s)/12),
    conic-gradient(from 120deg at 50% calc(250%/3),#62928c 120deg,#0000 0),
    repeating-conic-gradient(from 30deg,#0000 0 60deg,#e8cba9 0 120deg),
    repeating-conic-gradient(#33152e 0 60deg,#62928c 0 120deg,#414352 0 180deg);
  background-size: calc(0.577*var(--s)) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g45">
      <style>#g45 {
  --s: 200px; /* control the size */
  
  --_g: #dc9d37 25%,#fed450 0 50%,#0000 0;
  --_l1: #fff 0 1px,#0000 0 calc(25% - 1px),#fff 0 25%;
  --_l2: #fff 0 1px,#0000 0 calc(50% - 1px),#fff 0 50%;
  background:
    repeating-linear-gradient( 45deg,var(--_l1)),
    repeating-linear-gradient(-45deg,var(--_l1)),
    repeating-linear-gradient(  0deg,var(--_l2)),
    repeating-linear-gradient( 90deg,var(--_l2)),
    conic-gradient(from 135deg at 25% 75%,var(--_g)),
    conic-gradient(from 225deg at 25% 25%,var(--_g)),
    conic-gradient(from  45deg at 75% 75%,var(--_g)),
    conic-gradient(from -45deg at 75% 25%,var(--_g)),
    repeating-conic-gradient(#125c65 0 45deg,#bc4a33 0 90deg);  
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g46">
      <style>#g46 {
  --s: 60px; /* control the size */
  --c1: #F2B4A8;
  --c2: #91204D;
  
  --_g: radial-gradient(25% 25% at 25% 25%,var(--c1) 99%,#0000 101%);
  background:
   var(--_g) var(--s) var(--s)/calc(2*var(--s)) calc(2*var(--s)),
   var(--_g) 0 0/calc(2*var(--s)) calc(2*var(--s)),
   radial-gradient(50% 50%,var(--c2) 98%,#0000) 0 0/var(--s) var(--s),
   repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%) 
     calc(.5*var(--s)) 0/calc(2*var(--s)) var(--s);  
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g47">
      <style>#g47 {
  --s: 70px; /* control the size */
  --c: #6B5344;
  
  --_l: #0000 46%,var(--c) 47% 53%,#0000 54%;
  background:
    radial-gradient(100% 100% at 100% 100%,var(--_l)) var(--s) var(--s),
    radial-gradient(100% 100% at 0    0   ,var(--_l)) var(--s) var(--s),
    radial-gradient(100% 100%,#0000 22%,var(--c) 23% 29%, #0000 30% 34%,var(--c) 35% 41%,#0000 42%)
    #F8ECC9;
  background-size: calc(var(--s)*2) calc(var(--s)*2);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g48">
      <style>#g48 {
  --s: 100px; /* control the size */
  --c1: #F8B195;
  --c2: #355C7D;
  
  --_g: 
     var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
     var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
  background:
    radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
    radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
    var(--c1);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g49">
      <style>#g49 {
  --s: 140px; /* control the size */
  --c1: #AB3E5B;
  --c2: #FFBE40;
  
  --_g: 
    #0000 25%,#0008 47%,var(--c1)  53% 147%,var(--c2) 153% 247%,
    var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
  --_s: calc(25%/3) calc(25%/4) at 50%; 
  background:
    radial-gradient(var(--_s) 100%,var(--_g)),
    radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
    radial-gradient(var(--_s) 0   ,var(--_g)) calc(var(--s)/2) 0,
    radial-gradient(var(--_s) 0   ,var(--_g)) 0                calc(3*var(--s)/4),
    repeating-linear-gradient(90deg,#ACCEC0 calc(25%/-6) calc(25%/6),#61A6AB 0 calc(25%/2));
  background-size: var(--s) calc(3*var(--s)/2)
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g50">
      <style>#g50 {
  --s: 50px; /* control the size */
  --t: 6px;  /* control the thickness */
  --c1: #084c7f;
  --c2: #fef5e9;

  --_c: #0000 calc(98% - var(--t)),var(--c1) calc(100% - var(--t)) 98%,#0000;
  --_s: calc(2*var(--s)) calc(5*var(--s)/2);
  --_r0: /var(--_s) radial-gradient(calc(var(--s)/2) at 0    20%,var(--_c));
  --_r1: /var(--_s) radial-gradient(calc(var(--s)/2) at 100% 20%,var(--_c));
  background:
    0 0 var(--_r0),calc(-1*var(--s)) calc(5*var(--s)/4) var(--_r0),
    var(--s) 0 var(--_r1),0 calc(5*var(--s)/4) var(--_r1),
    conic-gradient(at var(--t) calc(20% + 2*var(--t)),#0000 75%,var(--c1) 0)
    calc(var(--t)/-2) calc(var(--s) - var(--t))/var(--s) calc(5*var(--s)/4),
    repeating-conic-gradient(var(--c2) 0 25%,#0000 0 50%)
    var(--s) calc(var(--s)/-8)/var(--_s),
    conic-gradient(from 90deg at var(--t) var(--t),var(--c2) 25%,var(--c1) 0) 
    calc((var(--s) - var(--t))/2) calc((var(--s) - var(--t))/2)/var(--s) calc(5*var(--s)/4);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g51">
      <style>#g51 {
  --s: 55px; /* control the size */
  --b: 15px; /* control the thickness of the curved lines */
  
  --_r: calc(1.28*var(--s) + var(--b)/2) at top 50%;
  --_f: calc(99.5% - var(--b)),#F9F2E7 calc(101% - var(--b)) 99.5%,#0000 101%;
  --_g0: calc(-.8*var(--s)), #88A65E var(--_f);
  --_g1: calc(-.8*var(--s)), #BFB35A var(--_f);
  --_s: calc(1.8*var(--s) + var(--b));
  background: 
    radial-gradient(var(--_r) right var(--_g0)) calc(-1*var(--_s)) var(--s),
    radial-gradient(var(--_r) left  var(--_g1))         var(--_s)  calc(-1*var(--s)),
    radial-gradient(var(--_r) right var(--_g1)) calc(var(--_s)/-2) calc(-1*var(--s)),
    radial-gradient(var(--_r) left  var(--_g0)) calc(var(--_s)/ 2) var(--s),
    linear-gradient(90deg,#88A65E 50%,#BFB35A 0);
  background-size: var(--_s) calc(4*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g52">
      <style>#g52 { 
  --_g: #036564 35%, #0000 36%;
  background: 
	  radial-gradient(at 100% 100%, var(--_g)),
	  radial-gradient(at 0    0   , var(--_g))
    #E8DDCB;
  background-size: 4em 4em;
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g53">
      <style>#g53 {
  --s: 80px; /* control the size */
  --c: #542437;
  
  --_g: 
    #0000 calc(-650%/13) calc(50%/13),var(--c) 0 calc(100%/13),
    #0000 0 calc(150%/13),var(--c) 0 calc(200%/13),
    #0000 0 calc(250%/13),var(--c) 0 calc(300%/13);
  --_g0: repeating-linear-gradient( 45deg,var(--_g));
  --_g1: repeating-linear-gradient(-45deg,var(--_g));
  background:
    var(--_g0),var(--_g0) var(--s) var(--s),
    var(--_g1),var(--_g1) var(--s) var(--s) #C02942;
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g54">
      <style>#g54 {
  --r: 56px; /* control the size */
  --c1: #3FB8AF /*color 1*/ 99%,#0000 101%;
  --c2: #FF9E9D /*color 2*/ 99%,#0000 101%;
  
  --s:calc(var(--r)*.866);  /* .866 = cos(30deg) */
  --g0:radial-gradient(var(--r),var(--c1));
  --g1:radial-gradient(var(--r),var(--c2));
  --f:radial-gradient(var(--r) at calc(100% + var(--s)) 50%,var(--c1));
  --p:radial-gradient(var(--r) at 100% 50%,var(--c2));
  background:
    var(--f) 0 calc(-5*var(--r)/2),
    var(--f) calc(-2*var(--s)) calc(var(--r)/2),
    var(--p) 0 calc(-2*var(--r)),
    var(--g0) var(--s) calc(-5*var(--r)/2),
    var(--g1) var(--s) calc( 5*var(--r)/2),
    radial-gradient(var(--r) at 100% 100%,var(--c1)) 0 calc(-1*var(--r)),   
    radial-gradient(var(--r) at 0%   50% ,var(--c1)) 0 calc(-4*var(--r)),
    var(--g1) calc(-1*var(--s)) calc(-7*var(--r)/2),
    var(--g0) calc(-1*var(--s)) calc(-5*var(--r)/2),
    var(--p) calc(-2*var(--s)) var(--r),
    var(--g0) calc(-1*var(--s)) calc(var(--r)/ 2),
    var(--g1) calc(-1*var(--s)) calc(var(--r)/-2),
    var(--g0) 0 calc(-1*var(--r)),
    var(--g1) var(--s) calc(var(--r)/-2),
    var(--g0) var(--s) calc(var(--r)/ 2) 
    #FF9E9D; /*color 2 again here */
  background-size: calc(4*var(--s)) calc(6*var(--r));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g55">
      <style>#g55 {
  --s: 50px; /* control the size */
  
  --c: #CFF09E;
  --_g: radial-gradient(#0B486B 49%,#0000 50%);
  background:
   var(--_g) calc(var(--s)/-2) calc(var(--s)/2),
   repeating-conic-gradient(from 45deg,var(--c) 0 25%,#0000 0 50%)
     calc(var(--s)/2) calc(var(--s)/2),
   var(--_g),var(--_g) var(--s) var(--s) var(--c);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g56">
      <style>#g56 {
  --s: 75px; /* control the size */
  
  --_c:#0000,#fff 1deg 79deg,#0000 81deg;
  --g0:conic-gradient(from 140deg at 50% 87.5% ,var(--_c));
  --g1:conic-gradient(from 140deg at 50% 81.25%,var(--_c));
  --g2:conic-gradient(from 140deg at 50% 75%   ,var(--_c));
  --g3:conic-gradient(at 10% 20%,#0000 75%,#fff 0);
  background:
    var(--g0) 0 calc(var(--s)/-4),var(--g0) var(--s) calc(3*var(--s)/4),
    var(--g1) ,var(--g1) var(--s) var(--s),
    var(--g2) 0 calc(var(--s)/ 4),var(--g2) var(--s) calc(5*var(--s)/4),
    var(--g3) calc( var(--s)/-10) var(--s),
    var(--g3) calc(9*var(--s)/10) calc(2*var(--s)),
    repeating-conic-gradient(from 45deg,#a31e39 0 25%,#31570e 0 50%);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g57">
      <style>#g57 {
  --s: 48px; /* control the size */
  --b: 18px; /* control the thickness of the wavy line */
  
  --_r: calc(1.28*var(--s) + var(--b)/2) at left 50%;
  --_f: calc(100% - var(--b)),#d8d8d8 calc(101% - var(--b)) 100%,#0000 101%;
  --g0: calc(-.8*var(--s)),#bb2528 var(--_f);
  --g1: calc(-.8*var(--s)),#146b3a var(--_f);
  --_s: calc(1.5*var(--s) + var(--b));
  background: 
    radial-gradient(var(--_r) bottom var(--g0)) calc(2*var(--s)) calc(-1*var(--_s)),
    radial-gradient(var(--_r) bottom var(--g1)) calc(-1*var(--s)) calc(var(--_s)/-2),
    radial-gradient(var(--_r) top    var(--g1)) 0 var(--_s),
    radial-gradient(var(--_r) top    var(--g0)) var(--s) calc(var(--_s)/ 2),
    linear-gradient(#bb2528 50%,#146b3a 0);
  background-size: calc(4*var(--s)) var(--_s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g58">
      <style>#g58 {
  --s: 150px; /* control the size */
  
  background:
    linear-gradient(135deg,#0000 18.75%,#5E412F 0 31.25%,#0000 0),
    repeating-linear-gradient(45deg,#5E412F -6.25% 6.25%,#FCEBB6 0 18.75%);
  background-size: var(--s) var(--s); 
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g59">
      <style>#g59 {
  --s: 120px; /* control the size */
  --c1: #4E395D;
  --c2: #8EBE94;
  
  --_g:var(--c1) 15%,var(--c2) 0 28%,#0000 0 72%,var(--c2) 0 85%,var(--c1) 0;
  background:
    conic-gradient(from 90deg at 2px 2px,#0000 25%,var(--c1) 0) -1px -1px,
    linear-gradient(-45deg,var(--_g)),linear-gradient(45deg,var(--_g)),
    conic-gradient(from 90deg at 40% 40%,var(--c1) 25%,var(--c2) 0) 
     calc(var(--s)/-5) calc(var(--s)/-5);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g60">
      <style>#g60 {
  --s: 120px; /* control the size*/
  
  --_g: radial-gradient(#0000 70%,#1a2030 71%);
  background:
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),
    conic-gradient(#0f9177 25%,#fdebad 0 50%,#d34434 0 75%,#b5d999 0);
  background-size: var(--s) var(--s); 
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>I also share cool CSS Tips<br>It takes one minute to read a tip</p>
            <a href="https://random.css-tip.com/" target="_blank">Get a random CSS Tip</a>
        </div>
    </section>
	  <section id="g61">
      <style>#g61 {
  --s: 34px; /* control the size (the circle diameter) */
  --c1: #ECBE13;
  --c2: #309292;
  
  --_g: radial-gradient(calc(var(--s)/2),var(--c1) 97%,#0000);
  background:
    var(--_g),var(--_g) calc(2*var(--s)) calc(2*var(--s)),
    repeating-conic-gradient(from 45deg,#0000 0 25%,var(--c2) 0 50%) calc(-.707*var(--s)) calc(-.707*var(--s)),
    repeating-linear-gradient(135deg,var(--c1) calc(var(--s)/-2) calc(var(--s)/2),var(--c2) 0 calc(2.328*var(--s)));
  background-size: calc(4*var(--s)) calc(4*var(--s));
  /* 
    0.707 = sqrt(2)/2
    2.328 = 2*sqrt(2) - .5
  */
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g62">
      <style>#g62 {
  --s: 71px; /* control the size */
  --c1: #78C0A8;
  --c2: #FCEBB6;
  
  background:
    radial-gradient(36% 72% at 25% -50%,var(--c2) 98%,#0000)
     0 0/calc(2*var(--s)) var(--s),
    radial-gradient(36% 72% at 75% 150%,var(--c2) 98%,#0000)
     0 0/calc(2*var(--s)) var(--s),
    radial-gradient(72% 36% at 150% 25%,var(--c2) 98%,#0000)
     0 0/var(--s) calc(2*var(--s)),
    radial-gradient(72% 36% at -50% 75%,var(--c2) 98%,#0000)
     0 0/var(--s) calc(2*var(--s)),
    repeating-conic-gradient(var(--c2) 0 45deg,var(--c1) 0 25%)
     0 0/calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g63">
      <style>#g63 {
  --s: 60px; /* control the size */
  
  --_c: #7BB0A8 calc(100% - var(--s)/2) 99%,#0000;
  --_g: var(--s),#0000 calc(99% - var(--s)/2),var(--_c);
  background:
    radial-gradient(var(--s) at 100% var(--_g)),
    radial-gradient(calc(var(--s)/4) at 50% calc(100%/3),var(--_c)) var(--s) 0,
    radial-gradient(var(--s) at   0% var(--_g)) 0 calc(3*var(--s))
    #A7DBAB;
  background-size: 
    calc(2*var(--s)) calc(9*var(--s)/4),
    calc(2*var(--s)) calc(3*var(--s)/4);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g64">
      <style>#g64 {
  --s: 30px; /* control the size */
  --c1: #E5FCC2;
  --c2: #45ADA8;
  
  --_s:37.5% 12.5% at 62.5%;
  --_g:34% 99%,#0000 101%;
  --g1:radial-gradient(var(--_s) 100%,#0000 32%,var(--c1) var(--_g));
  --g2:radial-gradient(var(--_s) 0   ,#0000 32%,var(--c1) var(--_g));
  --g3:radial-gradient(var(--_s) 100%,#0000 32%,var(--c2) var(--_g));
  --g4:radial-gradient(var(--_s) 0   ,#0000 32%,var(--c2) var(--_g));
  background:
    var(--g1),
    var(--g2) 0                calc(3*var(--s)),
    var(--g3) var(--s)         calc(3*var(--s)),
    var(--g4) var(--s)         calc(6*var(--s)),
    var(--g1) calc(2*var(--s)) calc(6*var(--s)),
    var(--g2) calc(2*var(--s)) calc(9*var(--s)),
    var(--g3) calc(3*var(--s)) calc(9*var(--s)),
    var(--g4) calc(3*var(--s)) 0,
    repeating-linear-gradient(var(--c1) 0 25%,var(--c2) 0 50%);
  background-size: calc(4*var(--s)) calc(12*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g65">
      <style>#g65 {
  --s: 56px; /* control the size */
  --g: 10px; /* control the gap */
  --c: #ECD078; /* first color */
  
  --_l: #0000 calc(33% - .866*var(--g)),var(--c) calc(33.2% - .866*var(--g)) 33%,#0000 34%;
  background:
    repeating-linear-gradient(var(--c) 0 var(--g), #0000 0 50%)
     0 calc(.866*var(--s) - var(--g)/2),
    conic-gradient(from -150deg at var(--g) 50%,var(--c) 120deg,#0000 0),
    linear-gradient(-120deg,var(--_l)),linear-gradient( -60deg,var(--_l))
    #0B486B; /* second color */
  background-size: var(--s) calc(3.466*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g66">
      <style>#g66 {
  --s: 100px; /* control the size */
  --c1: #E1F5C4;
  --c2: #3B8183;
  
  --_g:#0000, #0004 5%,
     var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
     var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,
     var(--c2) 86% 94%,#0004 95%,#0000;
  background:
    radial-gradient(100% 50% at 100% 0   ,var(--_g)),
    radial-gradient(100% 50% at 0    50% ,var(--_g)),
    radial-gradient(100% 50% at 100% 100%,var(--_g));
  background-size: var(--s) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g67">
      <style>#g67 {
  --s: 100px; /* control the size */
  
  background:
    conic-gradient(#0000 75%,#CFF09E 0) 0 calc(var(--s)/4),
    conic-gradient(from 45deg,#CFF09E 25%,#3B8686 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g68">
      <style>#g68 {
  --s: 100px; /* control the size */
  
  background:
    conic-gradient(#7A6A53   135deg,#D9CEB2 0 270deg,
                   #7A6A53 0 315deg,#D9CEB2 0)
    0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g69">
      <style>#g69 {
  --s: 66px;
  --c: #413E4A /* 1st color */ 25%;
  
  background: 
    conic-gradient(from -45deg at 75% 12.5%,var(--c),#0000 0),
    conic-gradient(from 135deg at 25% 87.5%,var(--c),#0000 0) 
     0 calc(var(--s)/2),
    conic-gradient(from 180deg at 50% 75%,#0000 62.5%,var(--c)),
    conic-gradient(            at 50% 25%,#0000 62.5%,var(--c)) 
     0 calc(var(--s)/2) #B38184 /* 2nd color */;
  background-size: var(--s) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g70">
      <style>#g70 {
  --s: 36px; /* control the size */
  --c1: #000;
  --c2: #d2d3d5;
  --c3: #727c7e;
  
  --g1: conic-gradient(at calc(250%/3) calc(50%/3),var(--c2) 60deg,#0000 0 300deg,var(--c1) 0);
  --g2: conic-gradient(at calc(50%/3) 50%,#0000 75%,var(--c1) 0);
  --g3: conic-gradient(at calc(100%/3) 50%,#0000 75%,var(--c2) 0);
  --g4: conic-gradient(from 59deg at calc(200%/3) calc(249%/9),var(--c3) 61deg,#0000 62deg);
  --g5: conic-gradient(from 60deg at 50% calc(250%/3),#f1f1f1 /*4th color*/ 60deg,var(--c1) 0 120deg,#0000 0);
  --_p: calc(9*tan(30deg)*var(--s)); /* if you don't see the pattern replace tan(30deg) with 0.577 */
  background:
    var(--g1) calc(-1*var(--s)) 0,var(--g1) calc(2*var(--s)) var(--_p),
    var(--g2),var(--g2) calc(3*var(--s)) var(--_p),
    var(--g3),var(--g3) calc(3*var(--s)) var(--_p),
    var(--g4),var(--g4) calc(3*var(--s)) var(--_p),
    var(--g5) calc(3*var(--s)) 0,var(--g5) 0 var(--_p) var(--c3);
  background-size: calc(6*var(--s)) calc(2*var(--_p))
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g71">
      <style>#g71 {
  --s: 220px; /* control the size */
  --c1: #774F38;
  --c2: #F1D4AF;
  
  --_g:radial-gradient(#0000 60%,var(--c1) 61% 63%,#0000 64% 77%,var(--c1) 78% 80%,#0000 81%);
  --_c:,#0000 75%,var(--c2) 0;
  background:
    conic-gradient(at 12% 20% var(--_c)) calc(var(--s)* .44) calc(.9*var(--s)),
    conic-gradient(at 12% 20% var(--_c)) calc(var(--s)*-.06) calc(.4*var(--s)),
    conic-gradient(at 20% 12% var(--_c)) calc(.9*var(--s)) calc(var(--s)* .44),
    conic-gradient(at 20% 12% var(--_c)) calc(.4*var(--s)) calc(var(--s)*-.06),
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2) var(--c2);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g72">
      <style>#g72 {
  --s: 100px; /* control the size */
  --c1: #FDF1CC;
  --c2: #987F69;
  
  --g: var(--c1)    3.125%,var(--c2) 0 9.375%,
       var(--c1) 0 15.625%,var(--c2) 0 21.875%,
       var(--c1) 0 28.125%,#0000 0;
  background: 
    linear-gradient(225deg,#0000    3.125%,var(--c2) 0 9.375%,
                           #0000 0 78.125%,var(--c2) 0 84.375%,#0000 0) 
     0 calc(var(--s)/2),
    linear-gradient( 45deg,var(--g)) 0 var(--s),
    linear-gradient( 45deg,var(--g)) calc(var(--s)/-2) calc(var(--s)/-2),
    linear-gradient(225deg,var(--g)) var(--s) 0,
    linear-gradient(225deg,var(--g)) calc(var(--s)/2) var(--s),
    repeating-linear-gradient(-45deg,var(--c1) -3.125% 3.125%,var(--c2) 0 9.375%);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g73">
      <style>#g73 {
  --s: 70px; /* control the size */
  
  --_g:,#0000 75%,#F67280 0;
  background:
    linear-gradient(-45deg var(--_g)),
    linear-gradient( 45deg var(--_g)) 
     0 calc(var(--s)/2) #355C7D;
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g74">
      <style>#g74 {
  --s: 50px; /* control the size */
  --c1: #5E412F;
  --c2: #FCEBB6;
  
  background:
    radial-gradient(25% 50%,var(--c1) 98%,#0000)
     var(--s) 0/calc(2*var(--s)) var(--s),
    radial-gradient(25% 50%,var(--c2) 98%,#0000)
     0 0/calc(2*var(--s)) var(--s),
    repeating-conic-gradient(var(--c1) 0 25%,var(--c2) 0 50%) 
     0 0/calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g75">
      <style>#g75 {
  background:
    repeating-conic-gradient(#F2E9E1 0 45deg,#99B2B7 0 90deg)
    0 0/100px 100px;
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g76">
      <style>#g76 {
  --s: 50px; /* control the size */
  --c1: #D9CEB2;
  --c2: #948C75;
  
  --_g: calc(2*var(--s)) calc(2*var(--s)) 
    radial-gradient(25% 25%,var(--c1) 99%,#0000 101%);
  background:
    0 var(--s)/var(--_g),var(--s) 0/var(--_g),
    radial-gradient(50% 50%,var(--c2) 97%,#0000)
     calc(var(--s)/2) calc(var(--s)/2)/var(--s) var(--s),
    linear-gradient(90deg,var(--c1) 50%,var(--c2) 0) 
     0 0/calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g77">
      <style>#g77 {
  --s: 100px; /* control the size */
  --c1: #5A3D31;
  --c2: #E5EDB8;
  
  background:
    radial-gradient(#0000 50%,var(--c1) 52% 55%,var(--c2) 57%)
    0 0/var(--s) var(--s),
    repeating-linear-gradient(45deg,var(--c1) 0 25%,var(--c2) 0 50%)
    0 0/calc(2*var(--s)) calc(2*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g78">
      <style>#g78 {
  --s: 84px; /* control the size */
  
  --c: #fff;
  --a:from -30deg at;
  background:
    linear-gradient(#0000 50%,#0004 0),
    conic-gradient(var(--a) 90%,var(--c) 240deg,#0000    0),
    conic-gradient(var(--a) 75%,#71e9a0  240deg,#0000    0),
    conic-gradient(var(--a) 25%,#0000    240deg,var(--c) 0),
    conic-gradient(var(--a) 40%,var(--c) 240deg,#2a6a9b  0);
  background-size: calc(1.5*var(--s)) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g79">
      <style>#g79 {
  --s: 50px; /* control the size */
  
  --c: #E08E79 0 25%,#774F38 0 50%,#0000 0;
  background:
    conic-gradient(from 180deg,var(--c)) 
    0/var(--s) var(--s),
    repeating-conic-gradient(from 90deg,var(--c))
    0/calc(3*var(--s)) calc(3*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
	  <section id="g80">
      <style>#g80 {
  --s: 100px; /* control the size */
  
  --c:#0000 0 25%,#EEDD99 0 50%;
  background:
    repeating-conic-gradient(from -45deg at 75% 37.5%,var(--c)),
    conic-gradient(#BBBB88 50%,#0000 0),
    repeating-conic-gradient(from  45deg at 25% 87.5%,var(--c))
    #BBBB88;
  background-size: var(--s) calc(2*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g81">
      <style>#g81 {
  --s: 124px; /* control the size */
  
  
  --g: #90c0b2 0 25%,#f9fbef 0 50%,#0000 0;
  background:
    conic-gradient(from 135deg at 25% 75%,var(--g))
     calc(var(--s)/4) calc(var(--s)/-4),
    conic-gradient(from -45deg at 75% 25%,var(--g))
     calc(var(--s)/-4) calc(var(--s)/4),
    repeating-conic-gradient(var(--g));
  background-size: var(--s) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g82">
      <style>#g82 {
  --s: 100px; /* control the size */
  --c1: #CC2A41;
  --c2: #351330;
  
  --_g: #0000 24%,
    var(--c2) 26% 34%,var(--c1) 36% 44%,
    var(--c2) 46% 54%,var(--c1) 56% 64%,
    var(--c2) 66% 74%,#0000 76%;
  background:
    radial-gradient(100% 100% at 100% 0,var(--_g)),
    radial-gradient(100% 100% at 0 100%,var(--_g)),
    radial-gradient(var(--c2) 14%,var(--c1) 16%) 
     calc(var(--s)/2) calc(var(--s)/2);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>You are not looking for a CSS pattern?<br>Maybe you want a CSS Shape?</p>
            <a href="https://css-shape.com/" target="_blank">Go to CSS Shape</a>
        </div>
    </section>
    <section id="g83">
      <style>#g83 {
  --s: 29px; /* control the size */
  --b: 3; /* control the thickness*/
  
  --g:#0000 calc(100% - var(--s)/var(--b) - 1px),#615375 /* 1st color*/ 
      calc(100% - var(--s)/var(--b)) calc(100% - 1px),#0000;
  --r:calc(2.414*var(--s));
  --p:calc(1.414*var(--s));
  background:
    radial-gradient(var(--r) at 0    0   ,var(--g)) var(--r) var(--r),
    radial-gradient(var(--s) at 0    0   ,var(--g)) var(--p) var(--p),
    radial-gradient(var(--r) at 0    100%,var(--g)) 0 var(--p),
    radial-gradient(var(--s) at 0    100%,var(--g)) calc(-1*var(--s)) var(--r),
    radial-gradient(var(--r) at 100% 0   ,var(--g)) var(--p) 0,
    radial-gradient(var(--s) at 100% 0   ,var(--g)) var(--r) calc(-1*var(--s)),
    radial-gradient(var(--r) at 100% 100%,var(--g)) calc(-1*var(--s)) calc(-1*var(--s)),
    radial-gradient(var(--s) at 100% 100%,var(--g)) #8EB2C5 /* 2nd color */;  
  background-size: calc(2*var(--r)) calc(2*var(--r));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g84">
      <style>#g84 {
  --s: 29px; /* control the size */
  
  --c:#FFE545 /* 1st color*/ calc(100% - 2px),#0000;
  --r:calc(2.414*var(--s));
  --p:calc(1.414*var(--s));
  --g:radial-gradient(var(--s),var(--c));
  background:
    radial-gradient(var(--r) at 0    0   ,var(--c)),
    radial-gradient(var(--r) at 0    100%,var(--c)),
    radial-gradient(var(--r) at 100% 0   ,var(--c)),
    radial-gradient(var(--r) at 100% 100%,var(--c)),
    var(--g),var(--g),var(--g),var(--g) #C2A34F /* 2nd color */;
  background-position: 
    var(--r) var(--r),0 var(--p),var(--p) 0,
    calc(-1*var(--s)) calc(-1*var(--s));
  background-size: calc(2*var(--r)) calc(2*var(--r));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g85">
      <style>#g85 {
  --s: 160px; /* control the size */
  --c1: #A14016;
  --c2: #CFC89A;
  
  --_g: var(--s) var(--s) 
    radial-gradient(var(--c1) 17%,var(--c2) 18% 35%,#0000 36.5%);
  background: 
    calc(var(--s)/-4) calc(var(--s)/-4)/var(--_g),
    calc(var(--s)/ 4) calc(var(--s)/ 4)/var(--_g),
    radial-gradient(var(--c2) 34%,var(--c1) 36% 68%,#0000 70%) 
     0 0/calc(var(--s)/2) calc(var(--s)/2),
    repeating-linear-gradient(45deg,var(--c1) -12.5% 12.5%,var(--c2) 0 37.5%)
     0 0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g86">
      <style>#g86 {
  --s: 100px; /* control the size */
  --c1: #ffd500;
  --c2: #0341ae;
  
  background:
    conic-gradient(at 50% 25%,var(--c2) 25%,#0000 0)
     calc(var(--s)/-4) calc(var(--s)/-2),
    conic-gradient(at 25% 25%,var(--c1) 25%,#0000 0 75%,var(--c2) 0)
     calc(var(--s)/4) calc(var(--s)/-4),
    conic-gradient(from -90deg at 75% 25%,var(--c2) 75%,var(--c1) 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g87">
      <style>#g87 {
  --s: 50px; /* control the size */
  
  --c: #0000 75%,#292522 0;
  --g1: conic-gradient(at 75% 25%,var(--c));
  --g2: conic-gradient(at 25% 75%,var(--c));
  background: 
    var(--g1),var(--g1) var(--s) var(--s),
    var(--g2),var(--g2) var(--s) var(--s) #EFD9B4;
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g88">
      <style>#g88 {
  --s: 160px; /* control the size */
  --c1: #AACCB1;
  --c2: #D3E2B6;
  
  background:
    conic-gradient(at 25% 25%,#0000 75%,var(--c1) 0)
     0 calc(3*var(--s)/4),
    conic-gradient(#0000 75%,var(--c2) 0) 
     calc(var(--s)/-8) calc(5*var(--s)/8),
    conic-gradient(at 25% 75%,var(--c1) 25%,var(--c2) 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g89">
      <style>#g89 {
  --s: 100px; /* control the size */
  --c1: #80BCA3;
  --c2: #655643;
  
  background:
    radial-gradient(var(--c2) 15%,
      #0000 17% 20%,var(--c2) 22% 25%,
      #0000 27% 30%,var(--c2) 32% 35%,
      #0000 37% 40%,var(--c2) 42% 45%,
      #0000 47% 50%,var(--c2) 52% 55%, var(--c1) 57%)
     calc(var(--s)/2) 0/var(--s) var(--s),
    repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g90">
      <style>#g90 {
  --s: 120px; /* control the size */
  --c1: #FF6B6B;
  --c2: #556270;
  
  background:
    conic-gradient(at calc(50%/3) calc(50%/3),#0000 75%,var(--c2) 0)
     calc(var(--s)/3) calc(var(--s)/3),
    conic-gradient(#0000 75%,var(--c1) 0) 
     calc(var(--s)/6) calc(var(--s)/6),
    conic-gradient(at calc(250%/3) calc(250%/3),var(--c1) 75%,var(--c2) 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g91">
      <style>#g91 {
  --s: 37px; /* control the size */
  
  --c:#0000,#2FB8AC .5deg 119.5deg,#0000 120deg;
  --g1:conic-gradient(from  60deg at 56.25% calc(425%/6),var(--c));
  --g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
  --g3:conic-gradient(from -60deg at 50%   calc(175%/12),var(--c));
  background:
    var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s)) 
    #ECBE13;
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g92">
      <style>#g92 {
  --s: 121px; /* control the size */
  
  --c: #DFBA69 12.5%,#5A2E2E 0 25%,#0000 0;
  background:
    conic-gradient(at 80% 20%,var(--c))
     calc(2*var(--s)/-5) calc(2*var(--s)/5),
    conic-gradient(from 180deg at 60% 40%,var(--c))
     calc(var(--s)/5) calc(var(--s)/-5),
    conic-gradient(at 0% 100%,var(--c));
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g93">
      <style>#g93 {
  --s: 76px; /* control the size  */
  --c1: #ff9f6a;
  --c2: #1f5e79; 
  
  background:
    conic-gradient(from 30deg at 80%,
       var(--c1) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from -30deg,
      var(--c2)   120deg,var(--c1) 0 240deg,
      var(--c2) 0 300deg,var(--c1) 0);
  background-size: calc(3*var(--s)/2) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g94">
      <style>#g94 {
  --s: 80px; /* control the size */
  
  --c:#0000 75%,#E9E0D1 0;
  --g:/calc(2*var(--s)) var(--s) 
    conic-gradient(at 62.5% 25%,var(--c));
  background:
    calc(  var(--s)/4) calc(var(--s)/ 4) var(--g),
    calc(5*var(--s)/4) calc(var(--s)/-4) var(--g),
    linear-gradient(90deg,var(--c)) 0/var(--s) var(--s)
    #59A80F;
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g95">
      <style>#g95 {
  --s: 100px; /* control the size */
  
  --c: #99B2B7; /* back color */
  background:
    conic-gradient(at 80% 80%,var(--c) 75%,#0000 0),
    linear-gradient(135deg,var(--c) calc(40%/3),
      #0000 0 calc(200%/3),var(--c) 0),
    conic-gradient(from 45deg at calc(160%/3) calc(80%/3),
      #0008 135deg,#0000 0 225deg,#0004 0)
    #EDC951; /* cube color */
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g96">
      <style>#g96 {
  --s: 90px; /* control the size */
  
  --_s:0 0/var(--s) var(--s);
  background:
    radial-gradient(#0000 50%,#0002 54%,#DAD8A7 57%) var(--_s),
    radial-gradient(circle at 40% 30%,#0000 4%,#000 90%) var(--_s),
    repeating-conic-gradient(#FF3D7F 0 25%,#34DFD2 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g97">
      <style>#g97 {
  --s: 6px; /* control the size */
  
  --g:#0000 66%,#3B2D38 68% 98%,#0000;
  background:
    radial-gradient(30% 30% at 0%   30%,var(--g))
     var(--s) calc(9*var(--s)),
    radial-gradient(30% 30% at 100% 30%,var(--g))
     var(--s) calc(-1*var(--s)),
    radial-gradient(30% 30% at 30% 100%,var(--g))
     calc(10*var(--s)) 0,
    radial-gradient(30% 30% at 30% 0%  ,var(--g))
     #F02475;
  background-size: calc(20*var(--s)) calc(20*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g98">
      <style>#g98 {
  --s: 150px; /* control the size */
  
  --c:#0000,#5E9FA3 2deg 133deg,#0000 135deg;
  --g1:conic-gradient(from -112.5deg at 25% 25%,var(--c));
  --g2:conic-gradient(from -22.5deg  at 75% 25%,var(--c));
  --g3:conic-gradient(from  67.5deg  at 75% 75%,var(--c));
  --g4:conic-gradient(from 157.5deg  at 25% 75%,var(--c));
  background: 
    var(--g1),var(--g1),var(--g2),var(--g2),
    var(--g3),var(--g3),var(--g4),var(--g4) #DCD1B4;
  background-position: 0 0,calc(var(--s)/2) calc(var(--s)/2);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g99">
      <style>#g99 {
  --s: 86px; /* control the size */
  --a: 60deg; /* control the angle */
  
  --g:#0000 45%,#88ABC2 46% 54%,#0000 55%;
  background:
    linear-gradient(        var(--a), var(--g)),
    linear-gradient(calc(-1*var(--a)),var(--g))
    #FAD3B2;
  background-size: var(--s) calc(tan(var(--a))*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g100">
      <style>#g100 {
  --s: 20px; /* control the size */
  --c1: #C7956D;
  --c2: #5E4352;
  
  --c:#0000 46.46%,var(--c1) 0 53.53%,#0000 0;
  --d:calc(10*var(--s)) calc(10*var(--s));
  --g:/var(--d) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
  background:
    conic-gradient(at 40% 40%,#0000 75%,var(--c2) 0) 
     calc(9*var(--s)) calc(9*var(--s))/
     calc(5*var(--s)) calc(5*var(--s)),
    calc(8*var(--s)) calc(8*var(--s)) var(--g),
    calc(3*var(--s)) calc(3*var(--s)) var(--g),
    linear-gradient( 45deg,var(--c)) 0 0/var(--d),
    linear-gradient(-45deg,var(--c)) 0 0/var(--d) var(--c2);
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>You reached the 100th Pattern 🥳<br>Keep scrolling or surprise yourself</p>
            <a href="https://random.css-pattern.com/" target="_blank">Get a random CSS Pattern</a>
        </div>
    </section>
    <section id="g101">
      <style>#g101 {
  --s: 160px; /* control the size*/
  --c1: #E08E79;
  --c2: #F1D4AF;
  --c3: #955E3E;
  
  background:
    conic-gradient(from  15deg at 86.6%,
      var(--c3) 25%,var(--c2) 0 150deg,#0000 0),
    conic-gradient(from -75deg at 50% 13.39%,
      var(--c1) 60deg,var(--c3) 0 150deg,
      var(--c2) 0 210deg,#0000 0),
    conic-gradient(from 15deg at 36.6% 63.4%,
     var(--c1) 60deg,var(--c3) 0 150deg,
     var(--c1) 0 210deg,var(--c2) 0 75%,var(--c3) 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g102">
      <style>#g102 {
  --s: 194px; /* control the size */
  --c1: #f6edb3;
  --c2: #acc4a3;
  
  --_l:#0000 calc(25%/3),var(--c1) 0 25%,#0000 0;
  --_g:conic-gradient(from 120deg at 50% 87.5%,var(--c1) 120deg,#0000 0);
  background:
    var(--_g),var(--_g) 0 calc(var(--s)/2),
    conic-gradient(from 180deg at 75%,var(--c2) 60deg,#0000 0),
    conic-gradient(from 60deg at 75% 75%,var(--c1) 0 60deg,#0000 0),
    linear-gradient(150deg,var(--_l)) 0 calc(var(--s)/2),
    conic-gradient(at 25% 25%,#0000 50%,var(--c2) 0 240deg,var(--c1) 0 300deg,var(--c2) 0),
    linear-gradient(-150deg,var(--_l)) #55897c /* third color here */;
  background-size: calc(0.866*var(--s)) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g103">
      <style>#g103 {
  --s: 50px; /* control the size */
  
  --c:calc(50%/3),#0000 75%,#5E412F 0; /* 1st color */
  --g:conic-gradient(at 50% var(--c));
  --l:conic-gradient(at var(--c));
  background:
    var(--g),
    var(--g) calc(var(--s)/2) var(--s),
    var(--g) var(--s) calc(2*var(--s)),
    var(--l) calc(2*var(--s)) 0,
    var(--l) 0 var(--s) #CCC68D; /* 2nd color */
  background-size: calc(3*var(--s)) calc(3*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g104">
      <style>#g104 {
  --s: 40px; /* control the size */
  --c1:#AB3E5B;
  --c2:#F9F2E7;
  
  --_g:#0000 17.5%,var(--c1) 18% 35%,var(--c2) 35.5% 39%,#0000 40%;
  background:
    radial-gradient(at 100% 0,var(--_g))
     0       calc(var(--s)/-2)/calc(2*var(--s)) calc(2*var(--s)),
    radial-gradient(at 0 100%,var(--_g))
     calc(var(--s)/2) var(--s)/calc(2*var(--s)) calc(2*var(--s)),
    conic-gradient(#0000 75%,var(--c1) 0) 0 0/var(--s) var(--s) 
     var(--c2);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g105">
      <style>#g105 {
  --s: 70px; /* control the size */
  --c1:#655643;
  --c2:#80BCA3;
  
  --g:,var(--c1) 25%,var(--c2) 0 50%,#0000 0;
  background:
    repeating-conic-gradient(var(--c1) 0 30deg,#0000 0 150deg,var(--c2) 0 50%)
     calc(1.5*var(--s)) calc(.865*var(--s)),
    conic-gradient(from  30deg at 75% 75%var(--g)),
    conic-gradient(from -30deg at 75% 25%var(--g)),
    conic-gradient(from 150deg at 25% 75%var(--g)),
    conic-gradient(from 210deg at 25% 25%var(--g)),
    repeating-conic-gradient(var(--c1) 0 30deg,var(--c2) 0 60deg);
  background-size: calc(3*var(--s)) calc(1.73*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g106">
      <style>#g106 {
  --s: 41px; /* control the size */
  --c1:#F2C45A;
  --c2:#5E8C6A;
  --c3:#88A65E;
  
  --_g:,var(--c1) 25%,var(--c2) 0 150deg,var(--c1) 0 240deg,#0000 0;
  background:
    conic-gradient(from  60deg at calc(3.866*var(--s)),var(--c2) 60deg,#0000 0)
     calc(1.366*var(--s)) calc(1.366*var(--s)),
    conic-gradient(from 240deg at calc( .866*var(--s)),var(--c2) 60deg,#0000 0)
     calc(2.366*var(--s)) calc(1.366*var(--s)),
    conic-gradient(at var(--s) var(--s),#0000 75%,var(--c1) 0)
     calc(1.366*var(--s)) calc(var(--s)/-2),
    conic-gradient(from 30deg at calc(-.288*var(--s)) 50%, #0000 120deg,var(--c3) 0),
    conic-gradient(from 90deg at calc(3.732*var(--s)) calc(1.866*var(--s)),
     var(--c3) 120deg,#0000 0),
    conic-gradient(from -30deg at calc(3.732*var(--s)) calc(.866*var(--s)),
     var(--c3) 120deg,var(--c1) 0 210deg,#0000 0),
    conic-gradient(from 150deg at calc( .866*var(--s))var(--_g)),
    conic-gradient(from -30deg at calc(2.866*var(--s))var(--_g)) var(--c3);
  background-size: calc(4.732*var(--s)) calc(2.732*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g107">
      <style>#g107 {
  --s: 60px; /* control the size */
  --c1:#542437;
  --c2:#CFBE27;
  
  --p: calc(var(--s)/2)/calc(2*var(--s)) var(--s);
  background:
    radial-gradient(var(--s),var(--c1) 49%,#0000 50%) var(--s) var(--p),
    radial-gradient(var(--s),var(--c2) 49%,#0000 50%) 0        var(--p),
    linear-gradient(var(--c1) 50%,var(--c2) 0) 0 0/1% calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g108">
      <style>#g108 {
  --s: 90px; /* control the size */
  --c1:#696758;
  --c2:#EEE6AB;
  
  --g:at calc(100%/3) 25%,#0000 75%,;
  background:
    conic-gradient(var(--g)var(--c1) 0),
    conic-gradient(var(--g)var(--c2) 0) 0 var(--s),
    repeating-conic-gradient(at calc(200%/3),
      var(--c1) 0 25%,var(--c2) 0 50%);
  background-size: var(--s) calc(4*var(--s)/3)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g109">
      <style>#g109 {
  --s: 80px; /* control the size */
  
  --_g:conic-gradient(at 25%,#0000 75%,#F8CA00 0);
  --_s:/calc(2*var(--s)) calc(2*var(--s));
  background:
    radial-gradient(#0000 64%,#C5BC8E 65%) 
     0 0/var(--s) var(--s),
    var(--_g) 0 0 var(--_s),
    var(--_g) var(--s) var(--s) var(--_s),
    repeating-conic-gradient(#0000 0 25%,#8A9B0F 0 50%)
     0 0 var(--_s),
    linear-gradient(#C02942 50%,#53777A 0) 
     0 0/1% var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g110">
      <style>#g110 {
  --s: 90px; /* control the size */  
  --c1:#78C0A8;
  --c2:#ADD8E6;
  
  --g:from 45deg at 50% 35%,#0000 75%,;
  --_s:var(--s) calc(2*var(--s));
  background:
    conic-gradient(var(--g)var(--c2) 0) 
     calc(var(--s)/2) var(--s)/var(--_s),
    conic-gradient(var(--g)var(--c1) 0) 
     calc(var(--s)/2)        0/var(--_s),
    conic-gradient(#0004 135deg,#0000 0 225deg,#0009 0)
     0 0/var(--s) var(--s),
    linear-gradient(var(--c1) 50%,var(--c2) 0) 
     0 var(--s)/var(--_s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g111">
      <style>#g111 {
  --s: 60px; /* control the size */
  --c1:#DCD1B4;
  --c2:#5E9FA3;
  
  background:
    repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%)
     0 0/calc(4*var(--s)) calc(2*var(--s)),
    conic-gradient(#0000 50%,var(--c2) 0)
     calc(var(--s)/2) 0/calc(2*var(--s)) 1%,
    radial-gradient(var(--c2) 70%,var(--c1) 72%)
     0 0/var(--s) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g112">
      <style>#g112 {
  --s: 65px; /* control the size */
  --c1:#ECD078;
  --c2:#542437;
  
  background:
    repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%)
     calc(var(--s)/-2) 0/calc(4*var(--s)) calc(2*var(--s)),
    conic-gradient(#0000 50%,var(--c2) 0)
     0 0/calc(2*var(--s)) 1%,
    repeating-conic-gradient(from 45deg,var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/var(--s) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g113">
      <style>#g113 {
  --s: 62px; /* control the size */
  --c1:#CF4647;
  --c2:#524656;
  
  background:
    conic-gradient(from  45deg at 75% 75%,var(--c1) 25%,var(--c2) 0 50%,#0000 0)
     0 0/var(--s) var(--s),
    conic-gradient(from 225deg at 25% 25%,var(--c2) 25%,var(--c1) 0 50%,#0000 0)
     0 0/var(--s) var(--s),
    repeating-conic-gradient(var(--c2) 0 25%,var(--c1) 0 50%)
     0 0/calc(2*var(--s)) calc(2*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g114">
      <style>#g114 {
  --s: 150px; /* control the size */
  --c:#633D2E;
  
  --l:var(--c) 20%,#0000 0;
  --g:35%,#F7AF63 0 45%,var(--c) 0;
  background:
    linear-gradient(45deg,var(--l) 45%,var(--c) 0 70%,#0000 0),
    linear-gradient(-45deg,var(--l) var(--g) 70%,#0000 0),
    linear-gradient(45deg,var(--c) var(--g));
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g115">
      <style>#g115 {
  --s: 120px; /* control the size */
  --c:#403B33;
  
  --g:,var(--c) 25%,#0000 0;
  background:
    conic-gradient(from  45deg at 75% 75%var(--g)),
    conic-gradient(from 135deg at 25% 75%var(--g)),
    conic-gradient(from -45deg at 75% 25%var(--g)),
    conic-gradient(from 225deg at 25% 25%var(--g)),
    repeating-conic-gradient(from -45deg,var(--c) 0 45deg,#E3AD40 0 50%);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g116">
      <style>#g116 {
  --s: 50px; /* control the size */
  
  --c:#0000 75%,#87BDB1 0;
  --g1:conic-gradient(at calc(200%/3) 10%,var(--c));
  --g2:conic-gradient(at 10% calc(200%/3),var(--c));
  background:
    var(--g1), var(--g2),
    var(--g1) var(--s) var(--s),
    var(--g2) var(--s) var(--s),
    var(--g1) calc(2*var(--s)) calc(2*var(--s)),
    var(--g2) calc(2*var(--s)) calc(2*var(--s)) #D3E2B6;
  background-size: calc(3*var(--s)) calc(3*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g117">
      <style>#g117 {
  --s: 40px; /* control the size */
  
  --c:,#0000 39%,#73C8A9 40% 93%,#0000 94%;
  --_s:calc(1.5*var(--s))/calc(4*var(--s)) calc(3*var(--s));
  background:
    radial-gradient(calc(1.5*var(--s)) at 37.5%   0%var(--c))
     calc(-.5*var(--s)) var(--_s),
    radial-gradient(calc(1.5*var(--s)) at 37.5% 100%var(--c))
     calc(1.5*var(--s)) var(--_s),
    radial-gradient(25% calc(50%/3),#0000 96%,#DEE1B6)
     0 0/calc(2*var(--s)) calc(3*var(--s)),
    repeating-conic-gradient(#BD5532 0 25%,#373B44 0 50%)
     0 0/calc(4*var(--s)) calc(6*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g118">
      <style>#g118 {
  --s: 85px; /* control the size */
  --c1:#339194 0;
  --c2:#F6D86B 0;
  
  --g1:conic-gradient(from  45deg at 62.5% 12.5%,#0000 75%,var(--c1));
  --g2:conic-gradient(from -45deg at 12.5% 12.5%,#0000 75%,var(--c1));
  --g3:conic-gradient(from 225deg at 87.5% 87.5%,#0000 75%,var(--c2));
  --g4:conic-gradient(from 135deg at 87.5% 37.5%,#0000 75%,var(--c2));
  background:
    var(--g4),var(--g4) var(--s) var(--s),
    var(--g3),var(--g3) var(--s) var(--s),
    var(--g2),var(--g2) var(--s) var(--s),
    var(--g1),var(--g1) var(--s) var(--s),
    repeating-linear-gradient(135deg,var(--c2) 12.5%,var(--c1) 25%);
  background-size: calc(2*var(--s)) calc(2*var(--s))
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g119">
      <style>#g119 {
  --s: 133px; /* control the size */
  
  --c:#67917A 0 60deg,#0000 0 50%;
  background:
    repeating-conic-gradient(from -15deg,var(--c))
     calc(var(--s)/2) calc(var(--s)/2),
    repeating-conic-gradient(from  15deg,var(--c))
    #B8AF03;
  background-size: var(--s) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g120">
      <style>#g120 {
  --s: 60px; /* control the size */
  --c1:#DEE8BE;
  --c2:#CD8C52;
  
  --c:#0000 71%,var(--c1) 0 79%,#0000 0;
  --_s:calc(var(--s)/2)/calc(2*var(--s)) calc(2*var(--s));
  background:
    linear-gradient(45deg,var(--c))
     calc(var(--s)/-2) var(--_s),
    linear-gradient(135deg,var(--c))
     calc(var(--s)/2) var(--_s),
    radial-gradient(var(--c1) 35%,var(--c2) 37%)
     0 0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g121">
      <style>#g121 {
  --s: 52px; /* control the size */
  --c1:#DFBA69;
  --c2:#5A2E2E;
  
  --p:35%,#0000 calc(35% + 1px);
  background:
    radial-gradient(at 0 100%,var(--c1) var(--p)) var(--s) 0,
    radial-gradient(at 0 100%,var(--c2) var(--p)) 0 var(--s),
    repeating-conic-gradient(from 45deg,var(--c2) 0 25%,var(--c1) 0 50%);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>I also have a collection of CSS Generators</p>
            <a href="https://css-generators.com/" target="_blank">Go to CSS Generators</a>
        </div>
    </section>
    <section id="g122">
      <style>#g122 {
  --s: 104px; /* control the size */
  --c1:#403B33;
  --c2:#94C7B6;
  
  --g1:/calc(2*var(--s)) calc(2*var(--s)) 
       radial-gradient(at 100% 0,var(--c2) 17.5%,#0000 18%);
  --g2:/calc(2*var(--s)) calc(2*var(--s)) 
       radial-gradient(at 0 100%,var(--c2) 17.5%,#0000 18%);
  --_s:0 calc(var(--s)/2)/var(--s) var(--s);
  background:
    calc(var(--s)/ 2) var(--s)var(--g1),
    calc(var(--s)/-2) 0       var(--g1),
    calc(var(--s)/-2) var(--s)var(--g2),
    calc(var(--s)/ 2) 0       var(--g2),
    radial-gradient(at 100% 0,var(--c1) 35%,#0000 35.5%) var(--_s),
    radial-gradient(at 0 100%,var(--c1) 35%,#0000 35.5%) var(--_s),
    repeating-conic-gradient(from 45deg,var(--c1) 0 25%,var(--c2) 0 50%)
     0 0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g123">
      <style>#g123 {
  --s: 112px; /* control the size */
  --c1:#490A3D;
  --c2:#F56991;
  
  --g1:conic-gradient(from -45deg at 60%,#0000 75%,var(--c1) 0);
  --g2:conic-gradient(from -45deg at 30%,#0000 75%,var(--c2) 0);
  background: 
    var(--g2) calc(var(--s)/8) 0,var(--g2) calc(5*var(--s)/8) var(--s),
    var(--g1),var(--g1) calc(var(--s)/2) var(--s) var(--c2);
  background-size: var(--s) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g124">
      <style>#g124 {
  --s: 30px; /* control the size */
  --c: #1B676B 25%,#0000 0; /* first color */
  
  --_s:/calc(6*var(--s)) calc(6*var(--s));
  --g1:var(--_s) conic-gradient(from  45deg at     calc(250%/3),var(--c));
  --g2:var(--_s) conic-gradient(from 135deg at 50% calc(250%/3),var(--c));
  --g3:var(--_s) conic-gradient(from 225deg at     calc(50%/3) ,var(--c));
  --g4:var(--_s) conic-gradient(from -45deg at 50% calc(50%/3) ,var(--c));
  background:
    calc(2*var(--s)) calc(5*var(--s)) var(--g4),
    calc(5*var(--s)) calc(2*var(--s)) var(--g4),
    0                calc(4*var(--s)) var(--g3),
    calc(3*var(--s)) var(--s)         var(--g3),
    calc(2*var(--s)) calc(3*var(--s)) var(--g2),
    calc(5*var(--s)) 0                var(--g2),
    var(--s)         var(--s)         var(--g1),
    calc(4*var(--s)) calc(4*var(--s)) var(--g1),
    conic-gradient(at calc(100%/3) calc(200%/3),var(--c))
     0 0/calc(3*var(--s)) calc(3*var(--s)) #88C425; /* second color */
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g125">
      <style>#g125 {
  --s: 112px; /* control the size */
  --c1:#C7F464;
  --c2:#8A9B0F;
  
  background: 
    conic-gradient(from  45deg at 70%,var(--c2) 25%,#0000 0) calc(5*var(--s)/8) var(--s),
    conic-gradient(from  45deg at 40%,var(--c1) 25%,#0000 0) calc(3*var(--s)/4) var(--s),
    conic-gradient(from -45deg at 30%,#0000 75%,var(--c2) 0) calc(var(--s)/8) 0,
    conic-gradient(from -45deg at 60%,var(--c2) 75%,var(--c1) 0);
  background-size: var(--s) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g126">
      <style>#g126 {
  --s: 50px; /* control the size */
  
  --g:conic-gradient(at 90% 40%,#0000 75%,#774F38 0);
  background: var(--g),var(--g) var(--s) var(--s) #F1D4AF;
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g127">
      <style>#g127 {
  --s: 100px; /* control the size */
  
  --c:#0000 48%,#F8EDD1 0 52%,#0000 0;
  background:
    linear-gradient(-45deg,var(--c)),
    linear-gradient( 45deg,var(--c)),
    repeating-conic-gradient(from 45deg,#D88A8A 0 25%,#9D9D93 0 50%);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g128">
      <style>#g128 {
  --s: 50px; /* control the size */
  
  --p:at 45% 40%,#0000 75%,;
  --g1:conic-gradient(var(--p)#c0b299 0);
  --g2:conic-gradient(var(--p)#a4a9aa 0);
  background:
    var(--g1),var(--g2) calc(2*var(--s)) 0,
    var(--g2) calc(3*var(--s)) var(--s),
    var(--g1) var(--s) var(--s) #2c2e2a;
  background-size: calc(4*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g129">
      <style>#g129 {
  --s: 60px; /* control the size */
  
  --c:#1C2130 0 25%,#0000 0;
  --p:0 0/calc(3*var(--s)) calc(2*var(--s));
  background:
    conic-gradient(from -45deg at 75% 62.5%,var(--c)) var(--p),
    conic-gradient(from 135deg at 25% 37.5%,var(--c)) var(--p),
    repeating-conic-gradient(from 90deg,var(--c),#D14334 0 50%)
     0 0/var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g130">
      <style>#g130 {
  --s: 50px; /* control the size */
  
  --c:#0000 75%,#F8E4C1 0;
  --g1:conic-gradient(at 78% 3%,var(--c));
  --g2:conic-gradient(at 3% 78%,var(--c));
  background:
    var(--g1),
    var(--g1) var(--s) var(--s),
    var(--g1) calc(2*var(--s)) calc(2*var(--s)),
    var(--g1) calc(3*var(--s)) calc(3*var(--s)),
    var(--g2) 0 calc(3*var(--s)),
    var(--g2) var(--s) 0,
    var(--g2) calc(2*var(--s)) var(--s),
    var(--g2) calc(3*var(--s)) calc(2*var(--s))
    #2B4E72;
  background-size: calc(4*var(--s)) calc(4*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g131">
      <style>#g131 {
  --s: 110px; /* control the size */
  --c1:#ECD078;
  --c2:#542437;
  
  --l1:#0000  48%,var(--c1) 0 52%,#0000 0;
  --l2:#0000 1.3%,var(--c2) 0 32%,#0000 0;
  background:
    linear-gradient(-45deg,var(--l2)),
    linear-gradient( 45deg,var(--l1)),
    linear-gradient( 45deg,var(--l2)) calc(var(--s)/2) calc(var(--s)/2),
    linear-gradient(-45deg,var(--l1)) var(--c2);
  background-size: calc(2*var(--s)) var(--s),var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g132">
      <style>#g132 {
  --s: 150px; /* control the size */
  --c1:#EAFF87;
  --c2:#FF714B;
  
  --l:var(--c1)99%,#0000 101%;
  --p:var(--c2)99%,#0000 101%;
  --r:closest-corner at;
  background:
    radial-gradient(var(--r)-25% 25%,var(--p)),
    radial-gradient(var(--r)25% -25%,var(--p)),
    radial-gradient(var(--r)125% 75%,var(--p)),
    radial-gradient(var(--r)75% 125%,var(--p)),
    radial-gradient(var(--r)75% 75%,var(--l)),
    radial-gradient(var(--r)25% 25%,var(--l)) var(--c2);
  background-size: var(--s) var(--s)
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g133">
      <style>#g133 {
  --s: 96px; /* control the size */
  
  --g:#000 0 25%,#fff 0 50%;
  background:
    repeating-conic-gradient(from 45deg,var(--g)) 
     0 0/var(--s) var(--s),
    repeating-conic-gradient(var(--g)) 
     0 0/calc(2*var(--s)) calc(2*var(--s));
  background-blend-mode: difference;
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g134">
      <style>#g134 {
  --s: 60px; /* control the size */
  
  --g1:conic-gradient(at 37.5% 87.5%,#0000 75%,#53777A 0);
  --g2:conic-gradient(at 12.5% 62.5%,#0000 75%,#CFF09E 0);
  background:
    var(--g2) calc(  var(--s)/4) calc(  var(--s)/4),
    var(--g2) calc(5*var(--s)/4) calc(5*var(--s)/4),
    var(--g1),var(--g1) var(--s) var(--s) #CFF09E;
  background-size: calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g135">
      <style>#g135 {
  --s: 80px; /* control the size */
  
  --c:#6B5344 0;
  --g:conic-gradient(at 50% 25%,#0000 75%,var(--c));
  background:
    repeating-linear-gradient(#0000 0 48%,var(--c) 50%),var(--g),
    conic-gradient(#0000 75%,var(--c)) calc(var(--s)/4) calc(var(--s)/2),
    var(--g) calc(var(--s)/2) var(--s) #F8ECC9;
  background-size: var(--s) var(--s),var(--s) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g136">
      <style>#g136 {
  --s: 100px; /* control the size */
  --c1:#5B7C8D;
  --c2:#EDF6EE;
  
  background:
    conic-gradient(var(--c1) 25%,#0000 0 50%,var(--c2) 0 75%,#0000 0),
    linear-gradient(135deg,
      var(--c1) 0 12.5%,var(--c2) 0 25%,
      var(--c1) 0 37.5%,var(--c2) 0 62.5%,
      var(--c1) 0 75%  ,var(--c2) 0 87.5%,
      var(--c1) 0);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g137">
      <style>#g137 {
  --s: 90px; /* control the size */
  --c:#DDD9AB;
  
  --g:#0000 calc(125%/3),var(--c) 0 calc(175%/3),#0000 0;
  --p:calc(var(--s)/2) calc(var(--s)/2)/calc(2*var(--s)) calc(2*var(--s));
  background:
    radial-gradient(var(--c) 34%,#0000 36%) 0 0/var(--s) var(--s),
    linear-gradient( 45deg,var(--g)) var(--p),
    linear-gradient(-45deg,var(--g)) var(--p) #E5625C;
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>Do you want to have some fun?<br>Solve a CSS Challenge</p>
            <a href="https://css-challenges.com/" target="_blank">Go to CSS Challenges</a>
        </div>
    </section>
    <section id="g138">
      <style>#g138 {
  --s: 50px; /* control the size */
  
  --c:#9D2053 99%,#0000 101%;
  background:
    radial-gradient(var(--s) at 100% 100%,var(--c)),
    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0
    #B5D8EB;
  background-size: calc(3*var(--s)) calc(5*var(--s)/2);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g139">
      <style>#g139 {
  --s: 90px; /* control the size */
  --c:#C2CBCE;
  
  --g:#0000 calc(125%/3),var(--c) 0 calc(175%/3),#0000 0;
  --p:0 0/calc(2*var(--s)) calc(2*var(--s));
  background:
    conic-gradient(#0000 75%,var(--c) 0) 
     calc(3*var(--s)/4) calc(3*var(--s)/4)/var(--s) var(--s),
    linear-gradient( 45deg,var(--g)) var(--p),
    linear-gradient(-45deg,var(--g)) var(--p) #CE1836;
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g140">
      <style>#g140 {
  --s: 50px; /* control the size */
  --c1:#F2F26F;
  --c2:#A0C55F;
  
  --c:#0000 79%,var(--c1) 81% 99%,var(--c2) 101% 150%,#0000 0;
  background:
    radial-gradient(var(--s) at 100% 100%,var(--c)),
    radial-gradient(var(--s) at 100% 0   ,var(--c)) calc(3*var(--s)/2) 0,
    radial-gradient(var(--s) at 0    100%,var(--c)) calc(  var(--s)/2) 0,
    radial-gradient(var(--s) at 0    0   ,var(--c)) calc(2*var(--s)) 0,
    repeating-linear-gradient(90deg,
      var(--c1) 0 calc(20%/3),#0000 0 calc(70%/3),
      var(--c1) 0 30%,#0000 0 50%) calc(var(--s)/-5) 0 var(--c2);
  background-size: calc(3*var(--s)) calc(5*var(--s)/2);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g141">
      <style>#g141 {
  --s: 100px; /* control the size */
  
  --c:#333 20% 30%;
  background:
    linear-gradient(135deg,#0000 20%,var(--c),#0000 0),
    repeating-linear-gradient(45deg,var(--c),#D3643B 0 70%);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g143">
      <style>#g143 {
  --s: 16px; /* control the size */
  --c1:#E4844A;
  --c2:#0D6759;
  
  --g:radial-gradient(30% 50% at 30% 100%,#0000 66%,var(--c1) 67% 98%,#0000);
  background:
    var(--g),var(--g) calc(5*var(--s)) calc(3*var(--s)),
    repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%);
  background-size: calc(10*var(--s)) calc(6*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g142">
      <style>#g142 {
  --s: 100px; /* control the size */
  
  --c:#88C425;
  --g:#1B676B -5% 5%,#0000 0 45%;
  background:
    linear-gradient(45deg,#0000 10%,var(--c) 0 40%,#0000 0),
    repeating-linear-gradient( 45deg,var(--g)),
    repeating-linear-gradient(-45deg,var(--g)) var(--c);
  background-size: var(--s) var(--s);
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g144">
      <style>#g144 {
  --s: 16px; /* control the size */
  --c1:#D88A8A;
  --c2:#474843;
  
  --g:#0000 66%,var(--c1) 67% 98%,#0000;
  background:
    radial-gradient(30% 50% at 30% 100%,var(--g)),
    radial-gradient(30% 50% at 70%   0%,var(--g)) var(--s) 0,
    repeating-linear-gradient(90deg,var(--c1) 0 10%,var(--c2) 0 50%);
  background-size: calc(10*var(--s)) calc(6*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section id="g145">
      <style>#g145 {
  --s: 90px; /* control the size */
  --c1:#ECF081;
  --c2:#AB3E5B;
  
  background:
    conic-gradient(at 25% 75%,#0000 25%,var(--c1) 0)
     calc(var(--s)/-8) calc(var(--s)/8)/var(--s) var(--s),
    radial-gradient(50% 50%,var(--c1) 24%,var(--c2) 26% 74%,#0000 76%) 
     0 0/var(--s) var(--s),
    conic-gradient(var(--c1) 75%,var(--c2) 0) 
     calc(var(--s)/2) calc(var(--s)/2)/
     calc(2*var(--s)) calc(2*var(--s));
}
</style><button>Copy the CSS</button>  
    </section>
    <section>
        <div>
            <p>You reached the end but it's not the end!<br>This collection will keep growing</p>
            <a href="https://github.com/Afif13/CSS-Pattern" target="_blank">Watch on Github</a>
            <a href="https://twitter.com/ChallengesCss" target="_blank">Follow me on Twitter</a>
        </div>
    </section>
  	 <a target="_blank" href="https://github.com/Afif13/CSS-Pattern" class="credit">
  		by <strong>Temani Afif</strong>
  	</a>
    <a target="_blank" href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fcss-pattern.com&amp;via=ChallengesCss&amp;text=Fancy%20backgrounds%20with%20CSS%20gradients!&amp;hashtags=CSS" class="tweet"><img alt="Twitter" src="twitter-24.png" width="24" height="24"></a>
  	<a href="https://support.temani-afif.com/" target="_blank" id="bmc-wbtn"><img src="https://cdn.buymeacoffee.com/widget/assets/coffee%20cup.svg" alt="Buy Me A Coffee"></a>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CVMK530JFV"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-CVMK530JFV');
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script type="text/javascript">
      var clipboard = new ClipboardJS('section button', {
          text: function(trigger) {
            return trigger.previousElementSibling.innerHTML.replace('#'+trigger.parentElement.id,'html');
          }
      });
      clipboard.on('success', function(e) {
        e.trigger.innerHTML = "Copied!"
        setTimeout(function() {
            e.trigger.innerHTML = "Copy the CSS"
        }, 1800);
        e.clearSelection();
      });
    </script>
  </body>
</html>