revision:
code
<div class="grid_A">
<div class="DIV" id="div1">1</div>
<div class="DIV" id="div2">2</div>
<div class="DIV" id="div3">3</div>
<div class="DIV" id="div4">4</div>
<div class="DIV" id="div5">5</div>
<div class="DIV" id="div6">6</div>
<div class="DIV" id="div7">7</div>
<div class="DIV" id="div8">8</div>
<div class="DIV" id="div9">9</div>
<div class="DIV" id="div10">10</div>
<div class="DIV" id="div11">11</div>
<div class="DIV" id="div12">12</div>
</div>
<style>
#div1{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #FF61D2, #FE9090);}
#div2{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #72FFB6, #10D164);}
#div3{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #305170, #6DFC6B);}
#div4{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #009245, #FCEE21);}
#div5{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);}
#div6{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #0100EC, #FB36F4);}
#div7{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #FDABDD, #374A5A);}
#div8{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #38A2D7, #561139);}
#div9{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #121C84, #8278DA);}
#div10{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #5761B2, #1FC5A8);}
#div11{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #FFDB01, #0E197D);}
#div12{position: relative; width: 20vw; height: 15vw;
background-image: linear-gradient(to bottom right, #FF3E9D, #0E1F40);}
</style>
code
<div class="grid_B">
<div class="DIV" id="div13">13</div>
<div class="DIV" id="div14">14</div>
<div class="DIV" id="div15">15</div>
<div class="DIV" id="div16">16</div>
<div class="DIV" id="div17">17</div>
<div class="DIV" id="div18">18</div>
<div class="DIV" id="div19">19</div>
<div class="DIV" id="div20">20</div>
<div class="DIV" id="div21">21</div>
<div class="DIV" id="div22">22</div>
<div class="DIV" id="div23">23</div>
<div class="DIV" id="div24">24</div>
</div>
<style>
#div13{position: relative; width: 15vw; height: 15vw;
background: linear-gradient(to right, red 85%, blue);}
#div14{position: relative; width: 15vw; height: 15vw;
background: linear-gradient(to right, red, red 0%, blue 100%, blue);}
#div15{position: relative; width: 15vw; height: 15vw;
background: linear-gradient(to right, red, red 47%, blue 53%, blue);}
#div16{position: relative; width: 15vw; height: 15vw;
background: linear-gradient(to right, red, red 50%, blue 50%, blue);}
#div17{position: relative; width: 15vw; height: 15vw;
background: linear-gradient(to right, red, red 20%, orange 20%, orange 40%, yellowgreen 40%,
yellowgreen 60%, lightblue 60%, lightblue 80%, purple 80%, purple);}
#div18{position: relative; width: 15vw; height: 15vw;
background-image: repeating-linear-gradient(45deg, transparent, transparent 9px,
#f4ff81 9px, #f4ff81 10px);}
#div19{position: relative; width: 15vw; height: 15vw;
background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #90a4ae 1px,
#90a4ae 2px);}
#div20{position: relative; width: 15vw; height: 15vw;
background-image: repeating-linear-gradient(90deg, rgba(224, 82, 67, 0.5) 0px,
rgba(224, 82, 67, 0.5)40px, transparent 40px, transparent 80px),
repeating-linear-gradient(0deg, rgba(224, 82, 67, 0.5) 0px, rgba(224, 82, 67, 0.5) 40px,
transparent 40px, transparent 80px),linear-gradient(90deg, hsl(250, 82%, 1%),
hsl(250, 82%, 1%));}
#div21{position: relative; width: 15vw; height: 15vw;
background-image: repeating-linear-gradient(45deg, hsla(312, 0%, 63%, 0.05) 0px,
hsla(312, 0%, 63%, 0.05) 10px, transparent 10px, transparent 100px),
repeating-linear-gradient( 90deg, hsla(312, 0%, 63%, 0.05) 0px, hsla(312, 0%, 63%, 0.05) 50px,
transparent 50px, transparent 100px),linear-gradient(90deg, hsl(80, 0%, 20%), hsl(80, 0%, 20%));}
#div22{position: relative; width: 15vw; height: 15vw;
background: repeating-radial-gradient(circle at 100%, #333, #333 10px, #999 10px, #999 20px);}
#div23{position: relative; width: 15vw; height: 15vw;
background-image: radial-gradient(#90caf9 20%, transparent 20%), radial-gradient(#1e88e5 20%,
transparent 20%); background-color: #64b5f6; background-position: top left, 50px 50px;
background-size: 100px 100px;}
#div24{position: relative; width: 15vw; height: 15vw;
background-image: radial-gradient(circle at top left, #ec407a, #ec407a 20%, #7e57c2 20%,
#7e57c2 40%, #42a5f5 40%, #42a5f5 60%, #26a69a 60%, #26a69a 80%, #9ccc65 80%);}
</style>
code:
<div class="DIV" id="div25">25</div>
<div class="DIV" id="div26">26</div>
<div class="DIV" id="div27">27</div>
<div class="DIV" id="div28">28</div>
<div class="DIV" id="div29">29</div>
<div class="DIV" id="div30">30</div>
<div class="DIV" id="div31">31</div>
<div class="DIV" id="div32">32</div>
<div class="DIV" id="div33">33</div>
<div class="DIV" id="div34">34</div>
<div class="DIV" id="div35">35</div>
<div class="DIV" id="div36">36</div>
</div>
<style>
#div25{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(yellow, red, black); }
#div26{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(circle farthest-corner, red, black);}
#div27{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(circle farthest-side, red, black);}
#div28{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(circle closest-side, red, black);}
#div29{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(circle closest-corner, red, black);}
#div30{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(circle closest-side at 20% 50%, yellow, red 70%, black);}
#div31{position: relative; width: 15vw; height: 15vw;
background-image: radial-gradient(circle closest-side at 20% 50%, yellow, red 80%, lightblue);}
#div32{position: relative; width: 15vw; height: 15vw;
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);}
#div33{position: relative; width: 15vw; height: 15vw;
background-image: radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);}
#div34{position: relative; width: 15vw; height: 15vw;
background-image: radial-gradient( circle at center in hsl longer hue, red, blue);}
#div35{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(ellipse 50% 50px, red, yellow 10%, #1e90ff 50%, beige);}
#div36{position: relative; width: 15vw; height: 15vw;
background: radial-gradient(circle 50px, red, yellow 10%, #1e90ff 50%, beige);}
</style>
conic gradients
top
37
38
38
40
41
42
43
44
45
46
47
48
code:
<div class="grid_B">
<div class="DIV" id="div37">37</div>
<div class="DIV" id="div38">38</div>
<div class="DIV" id="div39">38</div>
<div class="DIV" id="div40">40</div>
<div class="DIV" id="div41">41</div>
<div class="DIV" id="div42">42</div>
<div class="DIV" id="div43">43</div>
<div class="DIV" id="div44">44</div>
<div class="DIV" id="div45">45</div>
<div class="DIV" id="div46">46</div>
<div class="DIV" id="div47">47</div>
<div class="DIV" id="div48">48</div>
</div>
<style>
#div37{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(from 40deg, #fff, #000);}
#div38{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(red, yellow, green);}
#div39{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua,
blue, magenta, red);}
#div40{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(#ff8a00 0deg, #e52e71 1turn);}
#div41{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(#ff8a00, #e52e71, #ff8a00);}
#div42{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(lime 40%, yellow 0 70%, red 0);}
#div43{position: relative; width: 15vw; height: 15vw;
background: repeating-conic-gradient(#BF4D28 0 .00005%,#E1F5C4 0 .00017%) 0 0/5000px
4000px;}
#div44{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(at top right, slategray, white);}
#div45{position: relative; width: 15vw; height: 15vw;
background-image: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7)}
#div46{position: relative; width: 15vw; height: 15vw;
background: repeating-conic-gradient( #9c27b0 0 15deg, #ff9800 15deg 30deg);}
#div47{position: relative; width: 15vw; height: 15vw;
background: repeating-conic-gradient(from 45deg, #000 0% 25%, #eee 0% 50%);}
#div48{position: relative; width: 15vw; height: 15vw;
background: #0ac repeating-conic-gradient(hsla(0,0%,100%,.2) 0 15deg, hsla(0,0%,100%,0)
0 30deg);}
</style>
stacked linear gradients
top
49
50
51
52
53
54
55
56
57
58
59
60
code:
<div class="grid_B">
<div class="DIV" id="div49">49</div>
<div class="DIV" id="div50">50</div>
<div class="DIV" id="div51">51</div>
<div class="DIV" id="div52">52</div>
<div class="DIV" id="div53">53</div>
<div class="DIV" id="div54">54</div>
<div class="DIV" id="div55">55</div>
<div class="DIV" id="div56">56</div>
<div class="DIV" id="div57">57</div>
<div class="DIV" id="div58">58</div>
<div class="DIV" id="div59">59</div>
<div class="DIV" id="div60">60</div>
</div>
<style>
#div49{position: relative; width: 15vw; height: 15vw; background:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);}
#div50{position: relative; width: 15vw; height: 15vw; ackground-image:
linear-gradient(135deg, #000 0.125em, #0092b7 0, #0092b7 calc(50% - .125em),
#000 0, #000 calc(50% + .125em), #0092b7 0, #0092b7 calc(100% - .125em), #000 0),
linear-gradient(135deg, #000 0.125em, #0092b7 0, #0092b7 calc(50% - .125em), #000 0,
#000 calc(50% + .125em), #0092b7 0, #0092b7 calc(100% - .125em), #000 0 )
/* repeat as many times as needed */;}
#div51{position: relative; width: 15vw; height: 15vw; background:
repeating-linear-gradient(90deg, /* major */ #c8c8c8, #c8c8c8 .125em /* lines */,
transparent , transparent 2.5em /* space between */) 50% no-repeat,
repeating-linear-gradient(90deg, /* minor */ #c8c8c8, #c8c8c8 .125em /* lines */,
transparent , transparent 1.25em /* space between */) 50% no-repeat;}
#div52{position: relative; width: 15vw; height: 15vw; background:
repeating-linear-gradient(90deg, #6b4c1e, #6b4c1e 1px, #e1ba75 0, #e1ba75 2px,
transparent 0, transparent 4px) 25% 50% /* left */,
repeating-linear-gradient(90deg, #6b4c1e, #6b4c1e 1px, #e1ba75 0, #e1ba75 2px,
transparent 0, transparent 4px) 75% 50% /* right */orange;}
#div53{position: relative; width: 15vw; height: 15vw; background:
linear-gradient(90deg, green, yellow), linear-gradient(220deg, white 70.71%, black 38%),
linear-gradient(217deg, orange, grey 70.71%);}
#div54{position: relative; width: 15vw; height: 15vw; background:
repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49)
10%), repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221,
221, 0.49) 10%)}
#div55{position: relative; width: 15vw; height: 15vw; background:
repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(-45deg,
transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143,
77, 63, 0.25) 10px);}
#div56{position: relative; width: 15vw; height: 15vw; --s: 30px; --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);}
#div57{position: relative; width: 15vw; height: 15vw; --a: 35px; --a1:#999 20% 30%; background:
linear-gradient(-135deg,#0000 20%,var(--a1),#0000 0), repeating-linear-gradient(-45deg,var(--a1),
#A1601B 0 70%); background-size: var(--a) var(--a);}
#div58{position: relative; width: 15vw; height: 15vw; background: repeating-linear-gradient(90deg,
/* major */ #c8e8e8, #c8b8b8 .125vw /* lines */, transparent 1vw /* space between */) 50% no-repeat,
repeating-linear-gradient(90deg, /* minor */ #c8f8f8, #c8a8a8 .125vw /* lines */, transparent 1vw
/* space between */) 50% no-repeat;}
#div59{position: relative; width: 15vw; height: 15vw; background: repeating-linear-gradient(15deg, red,
transparent, blue, green, transparent, black),repeating-linear-gradient(45deg, transparent, black,
green, transparent, blue, red, transparent),repeating-linear-gradient(95deg, blue, transparent, red,
transparent, black, transparent, green);}
#div60{position: relative; width: 15vw; height: 15vw; background:linear-gradient(21deg,
rgba(255,0,0,.8), transparent, rgba(255,0,0,0.2) 70.71%), linear-gradient(217deg, rgba(0,255,0,.8),
rgba(0,255,0,0) 70.71%, transparent), linear-gradient(36deg,transparent, rgba(0,0,255,.8),
rgba(0,0,255,0.7) 70.71%);}
</style>
stacked radial gradients
top
61
62
63
64
65
66
67
68
69
70
71
72
code:
<div class="grid_B">
<div class="DIV" id="div61">61</div>
<div class="DIV" id="div62">62</div>
<div class="DIV" id="div63">63</div>
<div class="DIV" id="div64">64</div>
<div class="DIV" id="div65">65</div>
<div class="DIV" id="div66">66</div>
<div class="DIV" id="div67">67</div>
<div class="DIV" id="div68">68</div>
<div class="DIV" id="div69">69</div>
<div class="DIV" id="div70">70</div>
<div class="DIV" id="div71">71</div>
<div class="DIV" id="div72">72</div>
</div>
<style>
#div61{position: relative; width: 15vw; height: 15vw; background:
radial-gradient(farthest-side at top left, rgba(174,255,216,.75),transparent),
radial-gradient(farthest-side at bottom left, rgba(255,200,80,.75),transparent),
radial-gradient(farthest-corner at bottom right, rgba(231,111,81,.75),transparent) #003b44; }
#div62{position: relative; width: 15vw; height: 15vw; --s: 20px; --c: #209b99;
--_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,#20022a 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); }
#div63{position: relative; width: 15vw; height: 15vw; background:
radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige;
border-radius: 50%;}
#div64{position: relative; width: 15vw; height: 15vw; background:
radial-gradient(circle at top left, transparent 35px, #58a 0) top left,
radial-gradient(circle at top right, transparent 35px, #58a 0) top right,
radial-gradient(circle at bottom right, transparent 35px, #58a 0) bottom right,
radial-gradient(circle at bottom left, transparent 35px, #58a 0) bottom left;
background-size: 50% 50%; background-repeat: no-repeat;}
#div65{position: relative; width: 15vw; height: 15vw; background:
radial-gradient(closest-corner at 30% 30%, rgba(15, 15, 55, .9), transparent),
radial-gradient(closest-corner at 60% 60%, rgba(215, 25, 25, .7), transparent);}
#div66{position: relative; width: 15vw; height: 15vw; background:
radial-gradient(at 87% 87%, #eb4775 0px, transparent 50%),
radial-gradient(at 6% 99%, #eb6b47 0px, transparent 50%),
radial-gradient(at 76% 4%, #ebbd47 0px, transparent 50%),
radial-gradient(at 35% 44%, #47ebbd 0px, transparent 50%),
radial-gradient(at 86% 45%, #4775eb 0px, transparent 50%) #ffffff;}
#div67{position: relative; width: 15vw; height: 15vw; background:
radial-gradient( closest-corner at 40px 40px, #f35 0%, #43e 100%),
radial-gradient(closest-side at 40px 40px, #f35 0%, #43e 100%),
radial-gradient(farthest-side at 40px 40px, #f35 0%, #43e 100%);}
#div68{position: relative; width: 15vw; height: 15vw; background:
radial-gradient(circle at 50% 0, rgba(255, 170, 240, 0.8), rgba(155, 150, 150, 0.5) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(100, 0, 255, 0.5), rgba(0, 0, 255, 0.5) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.2) 70.71%) beige;
border-radius: 30%;}
#div69{position: relative; width: 15vw; height: 15vw; background-image:
radial-gradient(circle 100px, #787a54 100%, transparent 0),
radial-gradient(circle 200px at top left, #beb2d8 100%, transparent 0),
radial-gradient(circle 50px at 100px 250px, #dd206b 100%, transparent 0),
radial-gradient(circle 70px at 500px 250px, #f06 100%, transparent 0),
radial-gradient(circle 140px at 120px 500px, #d5a6b9 100%, transparent 0);}
#div70{position: relative; width: 15vw; height: 15vw; --d: 30px; --_e: #0000 83%,#e0a21c 85% 99%,
#0000 101%; background: radial-gradient(27% 29% at right ,var(--_e)) calc(var(--d)/ 2) var(--d),
radial-gradient(27% 29% at left ,var(--_e)) calc(var(--d)/-2) var(--d),
radial-gradient(29% 27% at top ,var(--_e)) 0 calc(var(--d)/ 2),
radial-gradient(29% 27% at bottom,var(--_e)) 0 calc(var(--d)/-2) #0e88ec;
background-size: calc(2*var(--d)) calc(2*var(--d));}
#div71{position: relative; width: 15vw; height: 15vw; --s: 30px; /* control the size */
--_g: #1111 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));}
#div72{position: relative; width: 15vw; height: 15vw; --s: 18px;
--_g: radial-gradient(#4d4d4d 45%,#0000 46%);
--_l: radial-gradient(#ffffff 15%,#0000 16%);
background: var(--_l),var(--_l),var(--_g),var(--_g); background-position: 0 0,var(--s) var(--s);
background-size: calc(2*var(--s)) calc(2*var(--s));
animation: x 2s cubic-bezier(0.5,92,0.5,-92) infinite, y 2s cubic-bezier(0.5,92,0.5,-92) infinite -.5s;}
@keyframes x {
to {background-position-x: 1px, calc(var(--s) - 1px),0,var(--s);}
}
@keyframes y {
to {background-position-y: 1px, calc(var(--s) - 1px),0,var(--s);
}
}
</style>
stacked conic gradients
top
73
74
75
76
77
78
79
80
81
82
83
84
<div class="grid_B">
<div class="DIV" id="div73">73</div>
<div class="DIV" id="div74">74</div>
<div class="DIV" id="div75">75</div>
<div class="DIV" id="div76">76</div>
<div class="DIV" id="div77">77</div>
<div class="DIV" id="div78">78</div>
<div class="DIV" id="div79">79</div>
<div class="DIV" id="div80">80</div>
<div class="DIV" id="div81">81</div>
<div class="DIV" id="div82">82</div>
<div class="DIV" id="div83">83</div>
<div class="DIV" id="div84">84</div>
</div>
<style>
#div73{position: relative; width: 15vw; height: 15vw; background: conic-gradient(#f06, rgba(0,0,0,.5)),
conic-gradient(silver 25%, #eee 0 50%, silver 0 75%, #eee 0);}
#div74{position: relative; width: 15vw; height: 15vw; --s: 6px; /* control the size */
--g: repeating-conic-gradient(#774F38 0 25%,#ECE5CE 0 50%) 0/; background:
var(--g) calc(1*var(--s)) calc(7*var(--s)), var(--g) calc(2*var(--s)) calc(5*var(--s)),
var(--g) calc(3*var(--s)) calc(3*var(--s)), var(--g) calc(5*var(--s)) calc(2*var(--s)),
var(--g) calc(7*var(--s)) calc(1*var(--s)); background-blend-mode: darken;}
#div75{position: relative; width: 15vw; height: 15vw; --sz: 14px; --c1: #97c3d7; --c2: #789cad;
--c3: #607D8B; --c4: #445a65; --ts: 50% / calc(var(--sz)* 20) calc(var(--sz)* 20); background:
conic-gradient(from -45deg at 8.5% 8.5%, var(--c1) 0 12.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 270deg at 8.25% 50%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 270deg at 50% 8.35%, var(--c1) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 270deg at 16.5% 33.5%, var(--c3) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 270deg at 33.5% 16.65%, var(--c3) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 270deg at 33.25% 33.25%, var(--c4) 0 12.5%, var(--c1) 0 25%, #fff0 0 100%)
var(--ts),
conic-gradient(from 0deg at 41.85% 8.25%, #fff0 0 225deg, var(--c3) 0 75%, #fff0 0 100%) var(--ts),
conic-gradient(from -135deg at 8.45% 91.75%, var(--c2) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from -180deg at 42.45% 91.75%, var(--c3) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from -180deg at 8.45% 83%, var(--c2) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from -180deg at 33.45% 91.75%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from -180deg at 33.45% 83.3%, var(--c1) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from -180deg at 8.45% 57.9%, var(--c2) 0 37.5%, #fff0 0 100%) var(--ts),
conic-gradient(from -180deg at 17.35% 67%, var(--c1) 0 37.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 180deg at 33.25% 67%, var(--c3) 0 12.5%, var(--c2) 0 25%, #fff0 0 100%)
var(--ts),
conic-gradient(from 0deg at 42% 91.8%, #fff0 0 75%, var(--c1) 0 87.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 91.75% 91.5%, var(--c1) 0 12.5%, var(--c4) 0 25%, #fff0 0 100%)
var(--ts),
conic-gradient(from 90deg at 57.5% 91.8%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 45deg at 92.25% 57.5%, var(--c1) 0 37.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 57.5% 91.8%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 83.35% 66.8%, var(--c2) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 66.5% 92%, var(--c3) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 66.75% 83.25%, var(--c2) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 67% 67%, var(--c1) 0 12.5%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 45deg at 58% 92%, var(--c2) 0 12.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 92.25% 8.25%, var(--c2) 0 12.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 92.5% 42.75%, var(--c3) 0 37.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 57.5% 8.25%, var(--c2) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 83.5% 33.5%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 66.75% 17%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 67% 33%, var(--c2) 0 12.5%, var(--c3) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 58% 8%, var(--c4) 0 12.5%, #fff0 0 100%) var(--ts),
conic-gradient(from 270deg at 42% 42%, var(--c2) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 180deg at 42% 58%, var(--c4) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 58% 58%, var(--c3) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 58% 42%, var(--c1) 0 25%, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 50% 50%, var(--c2) 0 45deg, var(--c3) 0 90deg, var(--c1) 0 135deg,
var(--c4) 0 180deg, var(--c3) 0 225deg, var(--c2) 0 270deg, var(--c4) 0 315deg,
var(--c1) 0 360deg) var(--ts);}
#div76{position: relative; width: 15vw; height: 15vw; --sz: 8px; --c1: #a7c957; --c2: #6a994e;
--c3: #386641; --c4: #4a8656; --ts: 50%/ calc(var(--sz) * 5.5) calc(var(--sz) * 9.5);
--b1: conic-gradient(from 180deg at 16% 73.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts);
--b2: conic-gradient(from 180deg at 39.5% 65.65%, var(--c3) 0 60deg, var(--c1) 0 120deg,
#fff0 0 100%) var(--ts); background:
conic-gradient(from 0deg at 92.66% 50%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts),
conic-gradient(from -60deg at 81.66% 10.25%, var(--c2) 0 180deg, #fff0 0 100%) var(--ts),
conic-gradient(from -60deg at 66.66% 22.25%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 71.66% 43%, var(--c3) 0 120deg, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 66.66% 45.95%, var(--c3) 0 60deg, #fff0 0 100%) var(--ts),
conic-gradient(from 120deg at 25% 91.5%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),
var(--b1), var(--b1), var(--b1), var(--b1), var(--b2), var(--b2), var(--b2), var(--b2),
conic-gradient(from 60deg at 50% 51.5%, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c4) 0 100%)
var(--ts);}
#div77{position: relative; width: 15vw; height: 15vw; --s: 20px; /* 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))}
#div78{position: relative; width: 15vw; height: 15vw; --sz: 6px; /* size */ --r1: #fd2e1a;
--r2: #9a252a; --v1: #cfa5f1; --r1: #673AB7; --r2: #4c2b87;--v2: #aa79d5;
--ts: 50%/ calc(var(--sz) * 33) calc(var(--sz) * 28); background:
conic-gradient(from -296deg at 100% 59%, var(--v2) 0 133deg, #fff0 0 100%) var(--ts),
conic-gradient(from -296deg at 85% 67%, var(--r2) 0 134.5deg, #fff0 0 100%) var(--ts),
conic-gradient(from -296deg at 68% 77%, var(--v2) 0 137deg, #fff0 0 100%) var(--ts),
conic-gradient(from -296deg at 55% 85%, var(--r2) 0 150deg, #fff0 0 100%) var(--ts),
conic-gradient(from -248deg at 38% 77%, var(--v2) 0 97deg, #fff0 0 100%) var(--ts),
conic-gradient(from -248deg at 15% 66%, var(--r2) 0 95deg, #fff0 0 100%) var(--ts),
conic-gradient(from 207deg at 15% 66%, var(--v2) 0 84deg, var(--v1) 0 138deg, #fff0 0 100%)
var(--ts),
conic-gradient(from 23deg at 85% 12%, var(--v2) 0 34deg, var(--v1) 0 136deg, #fff0 0 100%)
var(--ts),
conic-gradient(from 22deg at 66% 27%, var(--r2) 0 34deg, var(--r1) 0 128deg, #fff0 0 100%)
var(--ts),
conic-gradient(from 17deg at 50% 40%, var(--v2) 0 39deg, var(--v1) 0 133deg, #fff0 0 100%)
var(--ts),
conic-gradient(from 31deg at 33% 26%, var(--r2) 0 94deg, var(--r1) 0 125deg, #fff0 0 100%)
var(--ts),
conic-gradient(from -57deg at 19% 15%, var(--r2) 0 90deg, var(--v2) 0 181deg, var(--v1) 0
217deg, var(--r1) 0 360deg, #fff0 0 100%) var(--ts);
}
#div79{position: relative; width: 15vw; height: 15vw; --sz: 9px; --c1: #2196f3; --c2: #a9f5ff;
--ts: 50%/ calc(var(--sz) * 10) calc(var(--sz) * 5);background:
conic-gradient(from 90deg at 0% 96.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts),
conic-gradient(from 135deg at 51% 62%, var(--c2) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from 180deg at 49% 62%, var(--c2) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 69% 84%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts),
conic-gradient(from 180deg at 31% 84%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts),
conic-gradient(from 90deg at 57% 51%, var(--c2) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from 225deg at 43% 51%, var(--c2) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from 0deg at 99% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts),
conic-gradient(from 45deg at 80% 47%, var(--c2) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from -90deg at 1% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts),
conic-gradient(from -90deg at 20% 47%, var(--c2) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from 45deg at 75% calc(34% + 1px), var(--c1) 0 45deg, #fff0 0 100%) var(--ts),
conic-gradient(from -45deg at 24% 34%, var(--c2) 0 135deg, #fff0 0 100%) var(--ts),
var(--c1);
}
#div80{position: relative; width: 15vw; height: 15vw; --u: 10px; --c1: #a29478; --c2: #616c7f;
--c3: #414c66; --gp: 50%/ calc(var(--u) * 10) calc(var(--u) * 7.8); --dg: 0 25%, #fff0 0 100%;
--dr: from 45deg at; --dl: from -135deg at; --du: from -45deg at 50%; --dd: from 135deg at 50%;
background:
/*right*/
conic-gradient(var(--dr) 86% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dr) 76% 62%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--dr) 74.5% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dr) 65% 62%, var(--c2) var(--dg)) var(--gp),
conic-gradient(var(--dr) 63.5% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dr) 56% 62%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--dr) 54.5% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dr) 50% 62%, var(--c2) var(--dg)) var(--gp),
/*left*/
conic-gradient(var(--dl) 14% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dl) 24% 62%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--dl) 25.5% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dl) 35% 62%, var(--c2) var(--dg)) var(--gp),
conic-gradient(var(--dl) 36.5% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dl) 44% 62%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--dl) 45.5% 62%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dl) 50% 62%, var(--c2) var(--dg)) var(--gp),
/*up*/
conic-gradient(var(--du) 19%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--du) 31%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--du) 33%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--du) 43.5%, var(--c2) var(--dg)) var(--gp),
conic-gradient(var(--du) 45.5%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--du) 55%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--du) 57%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--du) 66%, var(--c2) var(--dg)) var(--gp),
/*down*/
conic-gradient(var(--dd) 81%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dd) 69%, var(--c3) var(--dg)) var(--gp),
conic-gradient(var(--dd) 67%, var(--c1) var(--dg)) var(--gp),
conic-gradient(var(--dd) 58%, var(--c2) var(--dg)) var(--gp);
}
#div81{position: relative; width: 15vw; height: 15vw; background:
repeating-conic-gradient(from 0deg at 80% 50%,#5691f580 0% 8.25%, #b338ff80 8.25% 16.5%,
#f8305880 16.5% 25%),
repeating-conic-gradient(from 15deg at 50% 50%, #e856f580 0% 8.25%, #ff384c80 8.25% 16.5%,
#e7f83080 16.5% 25%),
repeating-conic-gradient(from 0deg at 20% 50%, #f58356ff 0% 8.25%, #caff38ff 8.25% 16.5%,
#30f88aff 16.5% 25%);
}
#div82{position: relative; width: 15vw; height: 15vw; --s1: 40px; --c11:#585555; --c21:#ba0cf5;
background: conic-gradient(from 45deg at 75% 75%, var(--c11) 25%,var(--c21) 0 50%,
#0000 0) 0 0/var(--s1) var(--s1), conic-gradient(from 225deg at 25% 25%,var(--c21) 25%,
var(--c11) 0 50%,#0000 0) 0 0/var(--s1) var(--s1),repeating-conic-gradient(var(--c21) 0 25%,
var(--c11) 0 50%) 0 0/calc(2*var(--s1)) calc(2*var(--s1))}
#div83{position: relative; width: 15vw; height: 15vw; background: conic-gradient(#60f, rgba(0,100,40,
.5)), conic-gradient(goldenrod 25%, #eff 0 80%, burlywood 0 35%, #def 0);}
#div84{position: relative; width: 15vw; height: 15vw; --v: 5px; --w1: #d29478; --w2: #000c7f;
--w3: #999c66; --wp: 25%/ calc(var(--v) * 12) calc(var(--v) * 7.8); --wg: 0 25%, #ff00ff 0 100%;
--wr: from 45deg at; --wl: from -135deg at; --wu: from -45deg at 50%; --wd: from 135deg at 50%;
background:
/*right*/
conic-gradient(var(--wr) 86% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wr) 76% 62%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wr) 74.5% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wr) 65% 62%, var(--w2) var(--wg)) var(--wp),
conic-gradient(var(--wr) 63.5% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wr) 56% 62%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wr) 54.5% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wr) 50% 62%, var(--w2) var(--wg)) var(--wp),
/*left*/
conic-gradient(var(--wl) 14% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wl) 24% 62%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wl) 25.5% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wl) 35% 62%, var(--w2) var(--wg)) var(--wp),
conic-gradient(var(--wl) 36.5% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wl) 44% 62%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wl) 45.5% 62%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wl) 50% 62%, var(--w2) var(--wg)) var(--wp),
/*up*/
conic-gradient(var(--wu) 19%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wu) 31%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wu) 33%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wu) 43.5%, var(--w2) var(--wg)) var(--wp),
conic-gradient(var(--wu) 45.5%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wu) 55%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wu) 57%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wu) 66%, var(--w2) var(--wg)) var(--wp),
/*down*/
conic-gradient(var(--wd) 81%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wd) 69%, var(--w3) var(--wg)) var(--wp),
conic-gradient(var(--wd) 67%, var(--w1) var(--wg)) var(--wp),
conic-gradient(var(--wd) 58%, var(--w2) var(--wg)) var(--wp);}
</style>
mixed stacked gradients
top
85
86
87
88
89
90
91
92
93
code:
<div class="grid_B">
<div class="DIV" id="div85">85</div>
<div class="DIV" id="div86">86</div>
<div class="DIV" id="div87">87</div>
<div class="DIV" id="div88">88</div>
<div class="DIV" id="div89">89</div>
<div class="DIV" id="div90">90</div>
<div class="DIV" id="div91">91</div>
<div class="DIV" id="div92">92</div>
<div class="DIV" id="div93">93</div>
<!-- <div class="DIV" id="div94">94</div>
<div class="DIV" id="div95">95</div>
<div class="DIV" id="div96">96</div> -->
</div>
<style>
#div85{position: relative; width: 15vw; height: 15vw; background:
-webkit-repeating-radial-gradient(top left, circle, rgba(48, 56, 255, 0.52) 5%,
rgba(221, 221, 221, 0.49) 10%),
repeating-linear-gradient(-45deg, rgba(253, 70, 70, 0.52) 5%,
rgba(221, 221, 221, 0.49) 10%)}
#div86{position: relative; width: 15vw; height: 15vw; --sz: 6px; --c0: #ffffff00;
--c1: #bdd0e1; --c2: #809bb9; --c3: #3e394a; --ts: 50%/ calc(var(--sz) * 13.25)
calc(var(--sz) * 11.7); background:
repeating-conic-gradient(#3b354730 0.000001%, var(--c0) 0.00005%, var(--c0) 0.00035%,
var(--c0) 0.00005%) var(--ts),
repeating-conic-gradient(#35638b59 0.00002%, var(--c0) 0.00008%, var(--c0) 0.0008%,
var(--c0) 0.00008%) var(--ts),
repeating-linear-gradient(90deg, var(--c0) 0 24.33%, var(--c3) 0 25%) var(--ts),
linear-gradient(210deg, var(--c0) 0 80%, var(--c3) calc(80% + 1px) 80.5%, var(--c0)
calc(80.5% + 1px) 100%) var(--ts),
conic-gradient(from -90deg at 49.75% 100%, var(--c1) 0 30deg, var(--c0) 0 150deg,
var(--c2) 0 60deg) var(--ts),
conic-gradient(from -180deg at 24.5% 50.5%, var(--c1) 0 119deg, var(--c0) 0 100%)
var(--ts),
conic-gradient(from 120deg at 74.5% 50%, var(--c3) 0 120deg, var(--c0) 0 100%)
var(--ts),
conic-gradient(from 180deg at 49.5% 34%, var(--c2) 0 60deg, var(--c0) 0 100%)
var(--ts),
conic-gradient(from -120deg at 50% 34%, var(--c3) 0 60deg, var(--c0) 0 100%)
var(--ts),
conic-gradient(from 0deg at 74.5% 17.5%, var(--c2) 0 60deg, var(--c3) 0 121deg,
var(--c0) 0 100%) var(--ts),
linear-gradient(150deg, var(--c0) 0 40%, var(--c3) calc(40% + 1px) 40.5%,
var(--c0) calc(40.5% + 1px) 100%) var(--ts),
linear-gradient(90deg, var(--c0) 0 50%, var(--c2) 0 75%, var(--c0) 0 100%)
var(--ts),
repeating-linear-gradient(90deg, var(--c1) 0 24.33%, var(--c3) 0 25%)
var(--ts);
}
#div87{position: relative; width: 15vw; height: 15vw; --sz: 10px; --c0: #000;
--c1: #118dc7; --ts: 50%/ calc(var(--sz) * 8) calc(var(--sz) * 16); margin: 0;
--dot: var(--c1) 0 calc(var(--sz) * 0.78), #fff0 calc(calc(var(--sz) * 0.78) + 1px) 100%;
--dot2: radial-gradient(circle at 90% 0%, var(--dot)) var(--ts),
radial-gradient(circle at 65% 0%, var(--dot)) var(--ts),radial-gradient(circle at 40% 0%,
var(--dot)) var(--ts),radial-gradient(circle at 15% 0%, var(--dot)) var(--ts);
--cg1: conic-gradient(from -90deg at 5% 51%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
--cg2: conic-gradient(from -90deg at 25% 50%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
--cg3: conic-gradient(from -90deg at 30% 38.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
--cg4: conic-gradient(from -90deg at 50% 37.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
--cg5: conic-gradient(from -90deg at 55% 26%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
--cg6: conic-gradient(from -90deg at 75% 25%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
--cg7: conic-gradient(from -90deg at 80% 13.5%, var(--c0) 0 90deg, #fff0 0 100%) var(--ts);
--cg8: conic-gradient(from -90deg at 100% 12.5%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts);
background:
var(--dot2), var(--dot2),
radial-gradient(circle at 90% 100%, var(--dot)) var(--ts),
radial-gradient(circle at 65% 100%, var(--dot)) var(--ts),
radial-gradient(circle at 40% 100%, var(--dot)) var(--ts),
radial-gradient(circle at 15% 100%, var(--dot)) var(--ts),
radial-gradient(circle at 90% 12.5%, var(--dot)) var(--ts),
radial-gradient(circle at 65% 25%, var(--dot)) var(--ts),
radial-gradient(circle at 40% 37.5%, var(--dot)) var(--ts),
radial-gradient(circle at 15% 50%, var(--dot)) var(--ts),
var(--cg1), var(--cg1), var(--cg2), var(--cg2),
var(--cg3), var(--cg3), var(--cg4), var(--cg4),
var(--cg5), var(--cg5), var(--cg6), var(--cg6),
var(--cg7), var(--cg7), var(--cg8), var(--cg8),
linear-gradient(-45deg, #fff0 0 32.25% , #0002 50%, #000 77.5%) var(--ts),
linear-gradient(-45deg, #fff0 0 32.25% , #000 60%) var(--ts),
repeating-linear-gradient(90deg, var(--c0) 0 5%, var(--c1) 0 25%) var(--ts);
}
#div88{position: relative; width: 15vw; height: 15vw; --sz: 5px; /*** size ***/
--sp: 10s; /*** speed ***/ --b1: #3c3532; --b2: #1c1b18; --b3: #0c0b0a; --b4: #0c0b0ae0;
--c1: #e399ff; --ts: 50%/calc(var(--sz) * 17.5) calc(var(--sz) * 29.5); background:
/* black shadows */
radial-gradient(circle at 50% 50%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
radial-gradient(circle at 0% 0%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
radial-gradient(circle at 0% 100%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
radial-gradient(circle at 100% 0%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
radial-gradient(circle at 100% 100%, var(--b4) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8)) var(--ts),
/* border bottom */
conic-gradient(from 90deg at 97.5% 67%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
/*repeated*/
conic-gradient(from 90deg at 97.5% 67%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%)
var(--ts), /*repeated*/
conic-gradient(from 182.5deg at 2.5% 67%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%)
var(--ts),
/* border top */
conic-gradient(from 270deg at 2.5% 33%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
/*repeated*/
conic-gradient(from 270deg at 2.5% 33%, var(--c1) 0 87.5deg, #fff0 88deg 100%) var(--ts),
conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%)
var(--ts),
/*repeated*/
conic-gradient(from 2.5deg at 97.5% 33%, #fff0 0 0deg, var(--c1) 0.5deg 90deg, #fff0 0 100%)
var(--ts),
/* bottom */
conic-gradient(from 116.5deg at 50% 85.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
/*repeated*/
conic-gradient(from 116.5deg at 50% 85.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
/*repeated*/
conic-gradient(from 116.5deg at 50% 85.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
conic-gradient(from 120deg at 50% 83%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),
/* top */
conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
/*repeated*/
conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
/*repeated*/
conic-gradient(from -63.5deg at 50% 14.5%, var(--b1) 0 127deg, #fff0 0 100%) var(--ts),
conic-gradient(from -60deg at 50% 17%, var(--c1) 0 120deg, #fff0 0 100%) var(--ts),
/* central gradient */
conic-gradient( from 0deg at 50% 50%, #fff0 0 2deg, var(--b2) 2.5deg 57.5deg,
#fff0 58deg 62.5deg, var(--b1) 63deg 117.5deg, #fff0 118deg 122.5deg, var(--b3) 123deg 177.5deg,
#fff0 178deg 182deg, var(--b2) 182.5deg 237.5deg, #fff0 0 242.5deg, var(--b1) 243deg 297.5deg,
#fff0 298deg 302.5deg, var(--b3) 303deg 357.5deg, #fff0 358deg 360deg ) var(--ts), /* bg */
var(--c1); animation: colors var(--sp) linear 0s infinite;}
@keyframes colors {
100% { filter: hue-rotate(360deg); }
}
#div89{position: relative; width: 15vw; height: 15vw; background:
repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/3000px 3000px,
repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 40% 40%/4000px 3000px;
background-blend-mode: difference; filter: blur(2px) contrast(100) brightness(40);
mix-blend-mode: lighten;}
#div90{position: relative; width: 15vw; height: 15vw; background:
-webkit-repeating-radial-gradient(bottom left, circle, rgba(148, 16, 55, 0.52) 5%,
rgba(60, 58, 58, 0.49) 10%),repeating-linear-gradient(-45deg, rgba(116, 192, 145, 0.52) 5%,
rgba(221, 221, 221, 0.49) 10%), repeating-conic-gradient(#111 0 0.0001%,#aff 0 0.0002%) }
#div91{position: relative; width: 15vw; height: 15vw; background-image:
linear-gradient(to bottom right, #FF61D2, transparent, #FE9090),
radial-gradient(transparent, yellow, transparent, red, transparent, black),
conic-gradient(from 45deg, #fff, transparent, #000);}
#div92{position: relative; width: 15vw; height: 15vw; background:
repeating-radial-gradient(white 0 0.0001%, blue 0 0.0002%) 60% 60%/3000px 3000px,
repeating-conic-gradient(lightblue 0 0.0001%, white 0 0.0002%) 40% 40%/4000px 3000px;
background-blend-mode: multiply; filter: blur(2px) contrast(100) brightness(80);
mix-blend-mode: lighten;}
#div93{position: relative; width: 15vw; height: 15vw; --sz: 6px; --c0: #ffffff00; --c1: lightgreen;
--c2: skyblue; --c3: black; --ts: 50%/ calc(var(--sz) * 13.25) calc(var(--sz) * 11.7); background:
repeating-conic-gradient(#3b354730 0.000001%, var(--c0) 0.00005%, var(--c0) 0.00035%,
var(--c0) 0.00005%) var(--ts),
repeating-conic-gradient(#35638b59 0.00002%, var(--c0) 0.00008%, var(--c0) 0.0008%,
var(--c0) 0.00008%) var(--ts),
repeating-linear-gradient(-90deg, var(--c0) 0 24.33%, var(--c3) 0 25%) var(--ts),
linear-gradient(210deg, var(--c0) 0 80%, var(--c3) calc(80% + 1px) 80.5%, var(--c0)
calc(80.5% + 1px) 100%) var(--ts),
conic-gradient(from -90deg at 49.75% 100%, var(--c1) 0 30deg, var(--c0) 0 150deg, var(--c2)
0 60deg) var(--ts),
conic-gradient(from -180deg at 24.5% 50.5%, var(--c1) 0 119deg, var(--c0) 0 100%) var(--ts),
conic-gradient(from -120deg at 74.5% 50%, var(--c3) 0 120deg, var(--c0) 0 100%) var(--ts),
conic-gradient(from -180deg at 49.5% 34%, var(--c2) 0 60deg, var(--c0) 0 100%) var(--ts),
conic-gradient(from -120deg at 50% 34%, var(--c3) 0 60deg, var(--c0) 0 100%) var(--ts),
conic-gradient(from 0deg at 74.5% 17.5%, var(--c2) 0 60deg, var(--c3) 0 121deg, var(--c0)
0 100%) var(--ts),
linear-gradient(-150deg, var(--c0) 0 40%, var(--c3) calc(40% + 1px) 40.5%, var(--c0)
calc(40.5% + 1px) 100%) var(--ts),
linear-gradient(-90deg, var(--c0) 0 50%, var(--c2) 0 75%, var(--c0) 0 100%) var(--ts),
repeating-linear-gradient(-90deg, var(--c1) 0 24.33%, var(--c3) 0 25%) var(--ts);
}
/* #div94{position: relative; width: 15vw; height: 15vw; }
#div95{position: relative; width: 15vw; height: 15vw; }
#div96{position: relative; width: 15vw; height: 15vw; } */
</style>