/b/ - CSS background patterns

/b/ - Random

PEDOS WILL BE PERMABANNED

Mode: Reply

Name
Options
Subject
Message	Max message length: 12000
files	Drag files here to upload or click here to select them 0.00 / 50.00 MB Max file size: 32.00 MB Total max file size: 50.00 MB Max files: 5 Supported file types: GIF, JPG, PNG, WebM, OGG, and more

E-mail
Password	(used to delete files and posts)
Misc

Remember to follow the Rules

The backup domains are located at 8chan.se and 8chan.cc. TOR access can be found here, or you can access the TOR portal from the clearnet at Redchannit 3.0 (Temporarily Dead).

8chan.moe is a hobby project with no affiliation whatsoever to the administration of any other "8chan" site, past or present.

🇬🇧🇺🇸🇨🇦🇦🇺🇳🇿English boards: 🦄/mlp/|😂/tkr/|🕹️/v/|✨/a/|🎭/co/|🌹/rwby/|🧙🏻/fringe/|💂/brit/|🦅/pol/|📈/biz/|💪/fit/|👨‍🍳/ck/|🦔/fast/|🐾/fur/|🐭/vp/|🌸/jp/|💻/t/|✝️/christian/ 🇪🇸Spanish boards: 🐕/hisparefugio/|🦸/ac/|🎲/hisrol/ 🇮🇹 Italy:🍝/ita/ 🌈GAY boards: ♂️/cb/|🎀/trap/

CSS background patterns Anonymous 10/31/2025 (Fri) 03:48:43 No. 538244

Posting some css backgrounds i found on a shitty chan site that wasn't being moderated properly. I'm guessing most of these were taken from https://css-pattern.com/ but the site's admin seems to have changed the names >dark.css.arrows

body {
  --s: 125px; /* control the size */
  
  background:
    conic-gradient(#000 135deg,#1f1d1d 0 270deg, #000 0 315deg,#1f1d1d 0) 0/var(--s) var(--s);

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:15:36 No. 538255

>dark.css.newblue

body {
  --s: 90px; /* control the size */
  --c: #000;
  --_g: radial-gradient(#2A292D 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));

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:20:51 No. 538256

>dark.css.pasta

body {
  --s: 100px; /* control the size */
  --c1: #171715;
  --c2: #0d0c0c;
  --c3: #000;
  
  
  --_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);

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:23:24 No. 538257

>dark.css.planks

body {
  --s: 150px; /* control the size */
  
  background:
    linear-gradient(135deg,#0000 18.75%,#000 0 31.25%,#0000 0), repeating-linear-gradient(45deg,#000 -6.25% 6.25%,#1B1A19 0 18.75%);
  background-size: var(--s) var(--s);

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:27:24 No. 538258

>dark.css.platelets

body {
  --s: 80px; /* control the size */
  
  --c:#141313 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) #000;
  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));

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:28:19 No. 538259

> dark.css.ptiles

body {
background-color: #000000;
opacity: 1;
background-image:  repeating-linear-gradient(45deg, #242023 25%, transparent 25%, transparent 75%, #242023 75%, #242023), repeating-linear-gradient(45deg, #242023 25%, #000000 25%, #000000 75%, #242023 75%, #242023);
background-position: 0 0, 150px 150px;
background-size: 700px 1200px;

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:29:41 No. 538260

>dark.css.ripples

body {
  background: radial-gradient(circle at 50% 100%, #00000080 5%, #000000 5% 10%, #00000080 10% 15%, #000000 15% 20%, #00000080 20% 25%, #000000 25% 30%, #00000080 30% 35%, #000000 35% 40%, transparent 40%), radial-gradient(circle at 100% 50%, #00000080 5%, #000000 5% 10%, #00000080 10% 15%, #000000 15% 20%, #00000080 20% 25%, #000000 25% 30%, #00000080 30% 35%, #000000 35% 40%, transparent 40%), radial-gradient(circle at 50% 0%, #00000080 5%, #000000 5% 10%, #00000080 10% 15%, #000000 15% 20%, #00000080 20% 25%, #000000 25% 30%, #00000080 30% 35%, #000000 35% 40%, transparent 40%), radial-gradient(circle at 0 50%, #00000080 5%, #000000 5% 10%, #00000080 10% 15%, #000000 15% 20%, #00000080 20% 25%, #000000 25% 30%, #00000080 30% 35%, #000000 35% 40%, transparent 40%);
        background-size: 3em 3em;
        background-color: #705e5e;
  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:30:28 No. 538261

>dark.css.stripes

body {
background:
      conic-gradient(from -45deg,#11111f 90deg,#0000 0 180deg,#1d2028 0 270deg,#0000 0)   
        0 calc(58px/2)/58px 58px,    
      conic-gradient(from 135deg at 50% 0,#11111f 90deg,#1d2028 0)  
        0 0/calc(2*58px) 58px;

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:32:10 No. 538262

>dark.css.velvety

body {
background:
radial-gradient(circle closest-side at 60% 43%, #2f2c2d 26%, rgba(187,0,51,0) 27%), radial-gradient(circle closest-side at 40% 43%, #2f2a2b 26%, rgba(187,0,51,0) 27%), radial-gradient(circle closest-side at 42% 22%, #2b2728 43%, rgba(221,51,85,0) 45%), radial-gradient(circle closest-side at 58% 22%, #423739 43%, rgba(221,51,85,0) 45%), radial-gradient(circle closest-side at 50% 35%, #625f5f 32%, rgba(221,51,85,0) 27%), radial-gradient(circle closest-side at 60% 43%, #2d2729 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #262324 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #31292b 40%, rgba(221,51,85,0) 45%) 52px 50px, radial-gradient(circle closest-side at 60% 22%, #201d1e 40%, rgba(221,51,85,0) 45%) 48px 50px, radial-gradient(circle closest-side at 50% 35%, #605a5a 30%, rgba(221,51,85,0) 37%) 50px 50px;
background-color:#000;
background-size:100px 100px;

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:33:28 No. 538263

>dark.css.waves

body {
  --s: 160px; /* control the size */
  --c1: #1a1717;
  --c2: #000;
  
  --_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);

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:34:52 No. 538264

>dark.css.windmills

body {
  --s: 132px; /* control the size */
  --c1: #000;
  --c2: #1A1A18;
  
  --_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);

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:35:42 No. 538265

>dark.css.zigzag

body {
  background-color: #000000;
  background-image:  linear-gradient(135deg, #1d1b1b 25%, transparent 25%), linear-gradient(225deg, #1d1b1b 25%, transparent 25%), linear-gradient(45deg, #1d1b1b 25%, transparent 25%), linear-gradient(315deg, #1d1b1b 25%, #000000 25%);
  background-position:  40px 0, 40px 0, 0 0, 0 0;
  background-size: 80px 80px;
  background-repeat: repeat;
    color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:39:14 No. 538266

> light.css.arrows

body {
  --s: 125px; /* control the size */
  
  background:
    conic-gradient(#BDAE98 135deg,#D9CEB2 0 270deg, #bdae98 0 315deg,#D9CEB2 0) 0/var(--s) var(--s);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:41:16 No. 538267

>light.css.blue

body {
  background: #bea5d2;
  color: #111;
}

This isn't a pattern and it's not even blue.

Anonymous 10/31/2025 (Fri) 04:42:43 No. 538268

>light.css.chocolatey

body {
background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
    linear-gradient(160deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
    linear-gradient(50deg, transparent 37%, #dca 0, #dca 53%, transparent 0) #753;
    background-size: 280px 900px;
  
  color: #fff;
}

Anonymous 10/31/2025 (Fri) 04:43:47 No. 538269

>light.css.dots

body {
background-color: #e1ca86;
background-image: radial-gradient(#898920 1.05px, #e1ca86 1.05px);
background-size: 21px 21px;
  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:46:10 No. 538270

>light.css.fancyblocks

<style>
body {
  --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);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:47:15 No. 538271

>light.css.hoops

body {
  --s: 220px; /* control the size */
  --c1: #CE9D80;
  --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);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:49:00 No. 538272

>light.css.hypnotised

body {
  --s: 160px; /* control the size */
  --c1: #6D4D85;
  --c2: #3E81A2;
  
  --_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);

  color: #3FD0F5;
}

Anonymous 10/31/2025 (Fri) 04:50:17 No. 538273

>light.css.isometric

body {
background-color: #e5e5f7;
background-image:  linear-gradient(30deg, #cac4db 12%, transparent 12.5%, transparent 87%, #cac4db 87.5%, #cac4db), linear-gradient(150deg, #cac4db 12%, transparent 12.5%, transparent 87%, #cac4db 87.5%, #cac4db), linear-gradient(30deg, #cac4db 12%, transparent 12.5%, transparent 87%, #cac4db 87.5%, #cac4db), linear-gradient(150deg, #cac4db 12%, transparent 12.5%, transparent 87%, #cac4db 87.5%, #cac4db), linear-gradient(60deg, #cac4db77 25%, transparent 25.5%, transparent 75%, #cac4db77 75%, #cac4db77), linear-gradient(60deg, #cac4db77 25%, transparent 25.5%, transparent 75%, #cac4db77 75%, #cac4db77);
background-size: 80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;


  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:51:44 No. 538274

>light.css.leaves

body {
  --s: 120px; /* control the size*/
  
  --_g: radial-gradient(#0000 70%,#E9EBF8 71%);
  background:
    var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2), conic-gradient(#B4B8C5 25%,#94e5bd 0 50%,#B2AAB1 0 75%,#C7C5BF 0);
  background-size: var(--s) var(--s);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:53:42 No. 538275

>light.css.nature

body {
  --s: 60px; /* control the size */
  --b: 3; /* control the thickness*/
  
  --g:#0000 calc(100% - var(--s)/var(--b) - 1px),#67BA79 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)) #97CD95;  
  background-size: calc(2*var(--r)) calc(2*var(--r));

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:55:20 No. 538276

>light.css.newblue

body {
  --s: 90px; /* control the size */
  --c: #9AABBD;
  --_g: radial-gradient(#BAABFF 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));

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:57:02 No. 538277

light.css.pasta

body {
  --s: 100px; /* control the size */
  --c1: #decdac;
  --c2: #ca8a93;
  --c3: #d4a791;
  
  
  --_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);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:57:54 No. 538278

>light.css.planks

body {
  --s: 150px; /* control the size */
  
  background:
    linear-gradient(135deg,#0000 18.75%,#DFAA89 0 31.25%,#0000 0), repeating-linear-gradient(45deg,#DFAA89 -6.25% 6.25%,#FCEBB6 0 18.75%);
  background-size: var(--s) var(--s); 

  color: #111;
}

Anonymous 10/31/2025 (Fri) 04:58:43 No. 538279

>light.css.platelets

body {
  --s: 80px; /* 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));

  color: #111;
}

Anonymous 10/31/2025 (Fri) 05:00:19 No. 538280

>light.css.ptiles

body {
background-color: #da9797;
background-image:  repeating-linear-gradient(45deg, #83496c 25%, transparent 25%, transparent 75%, #83496c 75%, #83496c), repeating-linear-gradient(45deg, #83496c 25%, #da9797 25%, #da9797 75%, #83496c 75%, #83496c);
background-position: 0 0, 150px 150px;
background-size: 700px 1200px;
  
  
  color: #fff;
}

Anonymous 10/31/2025 (Fri) 05:01:12 No. 538281

>light.css.ripples

body {
  background: radial-gradient(circle at 50% 100%, #afd5bc80 5%, #afd5bc 5% 10%, #afd5bc80 10% 15%, #afd5bc 15% 20%, #afd5bc80 20% 25%, #afd5bc 25% 30%, #afd5bc80 30% 35%, #afd5bc 35% 40%, transparent 40%), radial-gradient(circle at 100% 50%, #afd5bc80 5%, #afd5bc 5% 10%, #afd5bc80 10% 15%, #afd5bc 15% 20%, #afd5bc80 20% 25%, #afd5bc 25% 30%, #afd5bc80 30% 35%, #afd5bc 35% 40%, transparent 40%), radial-gradient(circle at 50% 0%, #afd5bc80 5%, #afd5bc 5% 10%, #afd5bc80 10% 15%, #afd5bc 15% 20%, #afd5bc80 20% 25%, #afd5bc 25% 30%, #afd5bc80 30% 35%, #afd5bc 35% 40%, transparent 40%), radial-gradient(circle at 0 50%, #afd5bc80 5%, #afd5bc 5% 10%, #afd5bc80 10% 15%, #afd5bc 15% 20%, #afd5bc80 20% 25%, #afd5bc 25% 30%, #afd5bc80 30% 35%, #afd5bc 35% 40%, transparent 40%);
        background-size: 3em 3em;
        background-color: #ffffff;
  color: #111;
}

Anonymous 10/31/2025 (Fri) 05:02:58 No. 538282

>light.css.stpatrick

body {
background:
      radial-gradient(27% 29% at right, #0000 83%,#146212 85% 99%,#0000 101%) calc(32px/2) 32px,
      radial-gradient(27% 29% at left, #0000 83%,#146212 85% 99%,#0000 101%) calc(32px/-2) 32px,
      radial-gradient(29% 27% at top, #0000 83%,#146212 85% 99%,#0000 101%) 0 calc(32px/2),
      radial-gradient(29% 27% at bottom, #0000 83%,#146212 85% 99%,#0000 101%) 0 calc(32px/-2)
      #6ac368;
background-size: 64px 64px;

  color: #111;
}

Anonymous 10/31/2025 (Fri) 05:03:53 No. 538283

>light.css.stripes

body {
background:
      conic-gradient(from -45deg,#e4e4e4 90deg,#0000 0 180deg,#dfbec6 0 270deg,#0000 0)   
        0 calc(43px/2)/43px 43px,    
      conic-gradient(from 135deg at 50% 0,#e4e4e4 90deg,#dfbec6 0)  
        0 0/calc(2*43px) 43px;

  color: #111;
}

Anonymous 10/31/2025 (Fri) 05:05:22 No. 538284

>light.css.velvety

body {
background:
radial-gradient(circle closest-side at 60% 43%, #9b3753 26%, rgba(187,0,51,0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%), radial-gradient(circle closest-side at 42% 22%, #ac2b45 43%, rgba(221,51,85,0) 45%), radial-gradient(circle closest-side at 58% 22%, #d35 43%, rgba(221,51,85,0) 45%), radial-gradient(circle closest-side at 50% 35%, #d35 32%, rgba(221,51,85,0) 27%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 40%, rgba(221,51,85,0) 45%) 52px 50px, radial-gradient(circle closest-side at 60% 22%, #db3f5f 40%, rgba(221,51,85,0) 45%) 48px 50px, radial-gradient(circle closest-side at 50% 35%, #f06d87 30%, rgba(221,51,85,0) 37%) 50px 50px;
background-color:#661b2f;
background-size:100px 100px;

  color: #fff;
}

Anonymous 10/31/2025 (Fri) 05:07:02 No. 538286

>light.css.waves

body {
  --s: 160px; /* control the size */
  --c1: #BD9483;
  --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);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 05:09:45 No. 538287

>light.css.windmills

body {
  --s: 132px; /* control the size */
  --c1: #E5AA5D;
  --c2: #DDDB6C;
  
  --_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);

  color: #111;
}

Anonymous 10/31/2025 (Fri) 05:10:59 No. 538288

>light.css.zigzag

body {
  background-color: #a88468;
background-image:  linear-gradient(135deg, #c4a298 25%, transparent 25%), linear-gradient(225deg, #c4a298 25%, transparent 25%), linear-gradient(45deg, #c4a298 25%, transparent 25%), linear-gradient(315deg, #c4a298 25%, #a88468 25%);
background-position:  40px 0, 40px 0, 0 0, 0 0;
background-size: 80px 80px;
background-repeat: repeat;
  color: #111;
}

Anonymous 10/31/2025 (Fri) 06:31:13 No. 538290

Hey just curious because I'm retart: is there any reason to do pure CSS, vs doing this in SVG and shove it in the CSS?

Anonymous 11/01/2025 (Sat) 03:58:03 No. 538330

https://dev.to/codingdudecom/css-dotted-background-4m20

Anonymous 11/06/2025 (Thu) 06:26:41 No. 538570

>>538290 I have no idea. Maybe it depends on complexity.

Index Catalog Archive Top Reply

Manage Board Moderate Board Moderate Thread

Forms

Delete

Password Unlink (Removes file reference from posts) Delete (Removes file from the server)

Report

Reason Category Global

No Cookies?

Quick Reply


Sage Bypass Check