File tree Expand file tree Collapse file tree 1 file changed +15
-1
lines changed Expand file tree Collapse file tree 1 file changed +15
-1
lines changed Original file line number Diff line number Diff line change 27
27
< h1 > < span > C</ span > < span > S</ span > < span > S</ span > Pattern</ h1 >
28
28
< p > powered by CSS gradients</ p >
29
29
< h2 > the biggest collection of background Patterns</ h2 >
30
- < p > Explore 133 CSS-only patterns made with CSS gradients and optimized with CSS variables.</ p >
30
+ < p > Explore 134 CSS-only patterns made with CSS gradients and optimized with CSS variables.</ p >
31
31
</ header >
32
32
< script async src ="https://media.ethicalads.io/media/client/ethicalads.min.js "> </ script >
33
33
< div class ="adaptive " data-ea-publisher ="css-challengescom " id ="css-pattern " data-ea-type ="text " data-ea-style ="fixedfooter "> </ div >
@@ -2314,6 +2314,20 @@ <h2>the biggest collection of background Patterns</h2>
2314
2314
0 0 /calc(2 * var (--s )) calc (2 * var (--s ));
2315
2315
background-blend-mode : difference;
2316
2316
}
2317
+ </ style > < button > Copy the CSS</ button >
2318
+ </ section >
2319
+ < section id ="g134 ">
2320
+ < style > # g134 {
2321
+ --s : 60px ; /* control the size */
2322
+
2323
+ --g1 : conic-gradient (at 37.5% 87.5% , # 0000 75% , # 53777A 0 );
2324
+ --g2 : conic-gradient (at 12.5% 62.5% , # 0000 75% , # CFF09E 0 );
2325
+ background :
2326
+ var (--g2 ) calc ( var (--s )/ 4 ) calc ( var (--s )/ 4 ),
2327
+ var (--g2 ) calc (5 * var (--s )/ 4 ) calc (5 * var (--s )/ 4 ),
2328
+ var (--g1 ), var (--g1 ) var (--s ) var (--s ) # CFF09E ;
2329
+ background-size : calc (2 * var (--s )) calc (2 * var (--s ));
2330
+ }
2317
2331
</ style > < button > Copy the CSS</ button >
2318
2332
</ section >
2319
2333
< section >
You can’t perform that action at this time.
0 commit comments