MENU
❝ Aplicativos para várias plataformas by Developer Davidsonbpe.❞
GitHub
CodePen
Doar com
Developer
Compartilhar
Sair
BACK CSS GROUND HOME
Compartilhar
PRIVACY POLICY
DOAR COM
BACK CSS GROUND
cross-blue
.cross-blue{ background: linear-gradient( 135deg, #79b85b 0% 1%, transparent 1% 5%, #79b85b 5% 7%, transparent 7% 11%, #79b85b 11% 12%, transparent 12% 19%, #79b85b 19% 26%, transparent 26% 38%, #79b85b 38% 51%, transparent 51% 57%, #79b85b 57% 61%, transparent 61% 65%, #79b85b 65% 66%, transparent 66% 73%, #79b85b 73% 83%, transparent 83% 84%, #79b85b 84% 96%, transparent 96% 97% ), linear-gradient( 90deg, #1d6f21 0% 3%, transparent 3% 11%, #1d6f21 11% 25%, transparent 25% 26%, #1d6f21 26% 33%, transparent 33% 37%, #1d6f21 37% 38%, transparent 38% 46%, #1d6f21 46% 57%, transparent 57% 62%, #1d6f21 62% 79%, transparent 79% 80%, #1d6f21 80% 82%, transparent 82% 84%, #1d6f21 84% 86%, transparent 86% 87%, #1d6f21 87% 90%, transparent 90% 91%, #1d6f21 91% 93%, transparent 93% 99% ), linear-gradient( 45deg, #0e72bb 0% 8%, transparent 8% 13%, #0e72bb 13% 14%, transparent 14% 16%, #0e72bb 16% 18%, transparent 18% 20%, #0e72bb 20% 21%, transparent 21% 24%, #0e72bb 24% 25%, transparent 25% 28%, #0e72bb 28% 32%, transparent 32% 34%, #0e72bb 34% 38%, transparent 38% 41%, #0e72bb 41% 44%, transparent 44% 47%, #0e72bb 47% 55%, transparent 55% 56%, #0e72bb 56% 58%, transparent 58% 59%, #0e72bb 59% 61%, transparent 61% 69%, #0e72bb 69% 70%, transparent 70% 72%, #0e72bb 72% 76%, transparent 76% 86%, #0e72bb 86% 92%, transparent 92% 94%, #0e72bb 94% 99% ), linear-gradient(white, white); background-position: center; background-attachment: fixed;}
purple-machine
.purple-machine{ background: linear-gradient(45deg, #cd5cdc 3%, #d53333 0%, #b33b3b 11%, #cd5cdc 11%, #cd5cdc 18%, #48bb3a 17%, #3db320 39%, #cd5cdc 39%, #cd5cdc 46%, #d32d2d 46%, #ff2626 66%, #cd5cdc 64%, #cd5cdc 73%, #3e1f9f 67%, #210fb1 86%, #cd5cdc 76%, #cd5cdc 91%), linear-gradient(45deg, #df1ef3 28%, #403333 28%, #4a3333 43%), linear-gradient(90deg, #0d537c 39%, #5c49a7 39%, #33298d 60%, #0d537c 60%, #0d537c 62%, #30299f 62%, #150b22 89%, #0d537c 89%, #0d537c 92%, #691d76 92%, #5843a8 97%), linear-gradient(135deg, #9819e0 7%, #886262 7%, #501f1f 22%, #9819e0 22%, #9819e0 53%, #7f65be 53%, #8e1212 71%, #9819e0 71%, #9819e0 78%, #c02d2d 78%, #5e9508 79%), linear-gradient(45deg, #194a71 4%, #8d2d2d 4%, #e98f0b 8%, #194a71 8%, #194a71 9%, #7e3030 9%, #3F51B5 10%, #194a71 10%, #194a71 11%, #F44336 11%, #00BCD4 12%, #194a71 12%, #194a71 36%, #607D8B 36%, #CDDC39 39%, #194a71 39%, #194a71 41%, #4CAF50 41%, #4CAF50 49%, #194a71 49%, #194a71 55%, #E91E63 55%, #9C27B0 56%, #194a71 56%, #194a71 57%, #0ccdcd 57%, #c9b8b8 66%, #194a71 66%, #194a71 69%, #763f3f 69%, #361616 78%, #194a71 78%, #194a71 86%, #3c2121 86%, #9d0c0c 94%); background-position: center; background-attachment: fixed; }
dark-pink
.dark-pink{ background: linear-gradient(135deg, #d63d8a 0% 2%, transparent 2% 8%, #d63d8a 8% 9%, transparent 9% 10%, #d63d8a 10% 15%, transparent 15% 24%, #d63d8a 24% 27%, transparent 27% 31%, #d63d8a 31% 34%, transparent 34% 35%, #d63d8a 35% 40%, transparent 40% 42%, #d63d8a 42% 46%, transparent 46% 53%, #d63d8a 53% 55%, transparent 55% 60%, #d63d8a 60% 61%, transparent 61% 68%, #d63d8a 68% 70%, transparent 70% 72%, #d63d8a 72% 80%, transparent 80% 83%, #d63d8a 83% 85%, transparent 85% 90%, #d63d8a 90% 93%, transparent 93% 99%), linear-gradient(135deg, #302069 0% 1%, transparent 1% 3%, #302069 3% 6%, transparent 6% 7%, #302069 7% 8%, transparent 8% 13%, #302069 13% 14%, transparent 14% 20%, #302069 20% 22%, transparent 22% 25%, #302069 25% 30%, transparent 30% 33%, #302069 33% 37%, transparent 37% 39%, #302069 39% 44%, transparent 44% 45%, #302069 45% 46%, transparent 46% 54%, #302069 54% 55%, transparent 55% 56%, #302069 56% 60%, transparent 60% 62%, #302069 62% 70%, transparent 70% 78%, #302069 78% 83%, transparent 83% 86%, #302069 86% 87%), linear-gradient(#222222, #222222); background-position: center; background-attachment: fixed; }
more-windows
.more-windows{ background: linear-gradient(143deg, #2c5a87 0%, #4b952c 0%, #4c9d23 8%, #0c79e2 8%, #0c79e2 14%, #c94040 14%, #c76363 21%, #0c79e2 21%, #0c79e2 26%, #693fb3 26%, #6e4fb9 31%, #0c79e2 31%, #0c79e2 39%, #c79fc6 39%, #a679ff 49%, #0c79e2 49%, #0c79e2 54%, #ad3030 54%, #9b3535 69%, #0c79e2 67%, #FF9800 65%, #FF9800 84%, #FF9800 72%, #0c79e2 80%, #0c79e2 98%), linear-gradient(0deg, #0c79e2 3%, #917171 3%, #814e4e 4%, #0c79e2 4%, #0c79e2 27%, #5e5050 27%, #d7c9c9 47%, #0c79e2 47%, #0c79e2 54%, #501717 54%, #d12323 57%, #0c79e2 57%, #0c79e2 58%, #a95757 58%, #d5caca 67%, #0c79e2 67%, #0c79e2 68%, #4c0b0b 68%, #763737 73%, #0c79e2 73%, #0c79e2 74%, #af8850 74%, #9b8c62 83%, #0c79e2 83%, #0c79e2 99%); background-position: center; background-attachment: fixed; }
wow-plaid
.wow-plaid{ background: linear-gradient(45deg, #d004c7 0% 6%, transparent 6% 16%, #d004c7 16% 19%, transparent 19% 22%, #d004c7 22% 48%, transparent 48% 64%, #d004c7 64% 77%, transparent 77% 92%), linear-gradient(135deg, #e8707c 0% 26%, transparent 26% 29%, #e8707c 29% 42%, transparent 42% 51%, #e8707c 51% 55%, transparent 55% 73%, #e8707c 73% 95%, transparent 95% 98%), linear-gradient(45deg, #9fbf4c 0% 1%, transparent 1% 9%, #9fbf4c 9% 10%, transparent 10% 18%, #9fbf4c 18% 21%, transparent 21% 26%, #9fbf4c 26% 33%, transparent 33% 34%, #9fbf4c 34% 41%, transparent 41% 50%, #9fbf4c 50% 52%, transparent 52% 54%, #9fbf4c 54% 67%, transparent 67% 69%, #9fbf4c 69% 74%, transparent 74% 98%), linear-gradient(#aaf20c, #aaf20c); background-position: center; background-attachment: fixed; }
cool-red-stripes
.cool-red-stripes{ background: linear-gradient(0deg, #dc2724 0% 11%, transparent 11% 17%, #dc2724 17% 20%, transparent 20% 21%, #dc2724 21% 22%, transparent 22% 23%, #dc2724 23% 31%, transparent 31% 34%, #dc2724 34% 36%, transparent 36% 45%, #dc2724 45% 55%, transparent 55% 58%, #dc2724 58% 79%, transparent 79% 80%, #dc2724 80% 83%, transparent 83% 92%, #dc2724 92% 98%), linear-gradient(135deg, #dc2724 0% 4%, transparent 4% 31%, #dc2724 31% 32%, transparent 32% 36%, #dc2724 36% 40%, transparent 40% 44%, #dc2724 44% 45%, transparent 45% 51%, #dc2724 51% 52%, transparent 52% 62%, #dc2724 62% 64%, transparent 64% 72%, #dc2724 72% 79%, transparent 79% 81%, #dc2724 81% 93%, transparent 93% 98%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
weave
.weave{ background: linear-gradient(45deg, #3bdd76 0% 1%, transparent 1% 2%, #3bdd76 2% 3%, transparent 3% 11%, #3bdd76 11% 15%, transparent 15% 16%, #3bdd76 16% 17%, transparent 17% 19%, #3bdd76 19% 20%, transparent 20% 22%, #3bdd76 22% 24%, transparent 24% 26%, #3bdd76 26% 29%, transparent 29% 30%, #3bdd76 30% 32%, transparent 32% 36%, #3bdd76 36% 37%, transparent 37% 39%, #3bdd76 39% 42%, transparent 42% 44%, #3bdd76 44% 45%, transparent 45% 51%, #3bdd76 51% 52%, transparent 52% 54%, #3bdd76 54% 57%, transparent 57% 61%, #3bdd76 61% 63%, transparent 63% 70%, #3bdd76 70% 73%, transparent 73% 75%, #3bdd76 75% 76%, transparent 76% 77%, #3bdd76 77% 81%, transparent 81% 84%, #3bdd76 84% 89%, transparent 89% 91%, #3bdd76 91% 94%, transparent 94% 96%, #3bdd76 96% 99%), linear-gradient(135deg, #f77168 0% 2%, transparent 2% 4%, #f77168 4% 7%, transparent 7% 8%, #f77168 8% 10%, transparent 10% 14%, #f77168 14% 16%, transparent 16% 18%, #f77168 18% 22%, transparent 22% 24%, #f77168 24% 26%, transparent 26% 27%, #f77168 27% 28%, transparent 28% 30%, #f77168 30% 32%, transparent 32% 34%, #f77168 34% 38%, transparent 38% 40%, #f77168 40% 41%, transparent 41% 43%, #f77168 43% 47%, transparent 47% 50%, #f77168 50% 52%, transparent 52% 56%, #f77168 56% 58%, transparent 58% 59%, #f77168 59% 61%, transparent 61% 65%, #f77168 65% 68%, transparent 68% 72%, #f77168 72% 74%, transparent 74% 77%, #f77168 77% 78%, transparent 78% 84%, #f77168 84% 87%, transparent 87% 91%, #f77168 91% 94%, transparent 94% 96%, #f77168 96% 98%), linear-gradient(45deg, #20a76a 0% 9%, transparent 9% 29%, #20a76a 29% 35%, transparent 35% 48%, #20a76a 48% 55%, transparent 55% 59%, #20a76a 59% 61%, transparent 61% 79%, #20a76a 79% 81%, transparent 81% 89%, #20a76a 89% 93%), linear-gradient(#8cc867, #8cc867); background-position: center; background-attachment: fixed; }
pink-mess
.pink-mess{ background: linear-gradient(90deg, #940a4c 0% 4%, transparent 4% 29%, #940a4c 29% 35%, transparent 35% 41%, #940a4c 41% 42%, transparent 42% 57%, #940a4c 57% 60%, transparent 60% 65%, #940a4c 65% 68%, transparent 68% 81%, #940a4c 81% 92%, transparent 92% 93%, #940a4c 93% 95%), linear-gradient(135deg, #eb6eaa 0% 6%, transparent 6% 8%, #eb6eaa 8% 13%, transparent 13% 15%, #eb6eaa 15% 22%, transparent 22% 26%, #eb6eaa 26% 27%, transparent 27% 29%, #eb6eaa 29% 37%, transparent 37% 42%, #eb6eaa 42% 43%, transparent 43% 47%, #eb6eaa 47% 48%, transparent 48% 56%, #eb6eaa 56% 62%, transparent 62% 63%, #eb6eaa 63% 71%, transparent 71% 72%, #eb6eaa 72% 77%, transparent 77% 80%, #eb6eaa 80% 81%, transparent 81% 84%, #eb6eaa 84% 90%, transparent 90% 93%, #eb6eaa 93% 99%), linear-gradient(45deg, #f4f1de 0% 4%, transparent 4% 6%, #f4f1de 6% 13%, transparent 13% 27%, #f4f1de 27% 34%, transparent 34% 40%, #f4f1de 40% 42%, transparent 42% 49%, #f4f1de 49% 50%, transparent 50% 53%, #f4f1de 53% 54%, transparent 54% 56%, #f4f1de 56% 65%, transparent 65% 68%, #f4f1de 68% 78%, transparent 78% 83%, #f4f1de 83% 93%), linear-gradient(#222222, #222222); background-position: center; background-attachment: fixed; }
green-alternating
.green-alternating{ background: linear-gradient(45deg, #8d7f58 0% 16%, transparent 16% 25%, #8d7f58 25% 27%, transparent 27% 30%, #8d7f58 30% 31%, transparent 31% 35%, #8d7f58 35% 43%, transparent 43% 49%, #8d7f58 49% 53%, transparent 53% 58%, #8d7f58 58% 59%, transparent 59% 78%, #8d7f58 78% 79%, transparent 79% 80%, #8d7f58 80% 82%, transparent 82% 91%, #8d7f58 91% 94%), linear-gradient(45deg, #33f083 0% 17%, transparent 17% 26%, #33f083 26% 44%, transparent 44% 52%, #33f083 52% 65%, transparent 65% 75%, #33f083 75% 89%), linear-gradient(135deg, #6fbcc6 0% 26%, transparent 26% 43%, #6fbcc6 43% 47%, transparent 47% 55%, #6fbcc6 55% 77%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
green-slats
.green-slats{ background: linear-gradient(118deg, #61e030 0% 19%, transparent 16% 30%, #61e030 29% 31%, transparent 31% 33%, #61e030 32% 36%, transparent 36% 48%, #61e030 48% 55%, transparent 55% 57%, #61e030 57% 58%, transparent 58% 65%, #61e030 65% 67%, transparent 67% 73%, #61e030 73% 77%, transparent 77% 78%, #61e030 78% 84%, transparent 84% 88%, #61e030 88% 89%, transparent 89% 90%, #61e030 90% 96%), linear-gradient(55deg, #af7238 0% 8%, transparent 8% 10%, #af7238 10% 11%, transparent 11% 18%, #af7238 18% 26%, transparent 26% 27%, #af7238 27% 35%, transparent 35% 37%, #af7238 37% 38%, transparent 38% 39%, #af7238 39% 58%, transparent 58% 66%, #af7238 66% 68%, transparent 68% 71%, #af7238 71% 86%, transparent 86% 90%, #af7238 90% 92%, transparent 92% 97%), linear-gradient(0deg, #d59505 0% 11%, transparent 11% 79%, #d59505 79% 91%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
cool-layers
.cool-layers{ background: linear-gradient(135deg, #31608f 0% 8%, transparent 8% 18%, #31608f 18% 23%, transparent 23% 25%, #31608f 25% 50%, transparent 50% 57%, #31608f 57% 63%, transparent 63% 72%, #31608f 72% 74%, transparent 74% 79%, #31608f 79% 83%, transparent 83% 84%, #31608f 84% 92%, transparent 92% 97%), linear-gradient(45deg, #441824 0% 2%, transparent 2% 8%, #441824 8% 42%, transparent 42% 47%, #441824 47% 71%, transparent 71% 75%, #441824 75% 84%), linear-gradient(45deg, #4b4f75 0% 3%, transparent 3% 6%, #4b4f75 6% 26%, transparent 26% 29%, #4b4f75 29% 30%, transparent 30% 33%, #4b4f75 33% 34%, transparent 34% 36%, #4b4f75 36% 44%, transparent 44% 45%, #4b4f75 45% 66%, transparent 66% 73%, #4b4f75 73% 79%, transparent 79% 81%, #4b4f75 81% 91%, transparent 91% 98%), linear-gradient(0deg, #a21927 0% 2%, transparent 2% 4%, #a21927 4% 15%, transparent 15% 28%, #a21927 28% 30%, transparent 30% 32%, #a21927 32% 38%, transparent 38% 44%, #a21927 44% 45%, transparent 45% 69%, #a21927 69% 77%, transparent 77% 78%, #a21927 78% 79%, transparent 79% 81%, #a21927 81% 84%, transparent 84% 87%, #a21927 87% 91%, transparent 91% 96%, #a21927 96% 99%), linear-gradient(#88873d, #88873d); background-position: center; background-attachment: fixed; }
green-pink
.green-pink{ background: linear-gradient(0deg, #a3e101 0% 1%, transparent 1% 8%, #a3e101 8% 17%, transparent 17% 23%, #a3e101 23% 25%, transparent 25% 34%, #a3e101 34% 43%, transparent 43% 44%, #a3e101 44% 55%, transparent 55% 63%, #a3e101 63% 66%, transparent 66% 72%, #a3e101 72% 73%, transparent 73% 91%, #a3e101 91% 94%), linear-gradient(45deg, #e75a70 0% 3%, transparent 3% 4%, #e75a70 4% 8%, transparent 8% 17%, #e75a70 17% 18%, transparent 18% 26%, #e75a70 26% 32%, transparent 32% 40%, #e75a70 40% 43%, transparent 43% 50%, #e75a70 50% 55%, transparent 55% 56%, #e75a70 56% 57%, transparent 57% 62%, #e75a70 62% 66%, transparent 66% 73%, #e75a70 73% 79%, transparent 79% 81%, #e75a70 81% 83%, transparent 83% 85%, #e75a70 85% 86%, transparent 86% 87%, #e75a70 87% 88%, transparent 88% 92%, #e75a70 92% 93%), linear-gradient(135deg, #fbbcd1 0% 3%, transparent 3% 12%, #fbbcd1 12% 13%, transparent 13% 25%, #fbbcd1 25% 31%, transparent 31% 32%, #fbbcd1 32% 34%, transparent 34% 35%, #fbbcd1 35% 37%, transparent 37% 45%, #fbbcd1 45% 48%, transparent 48% 53%, #fbbcd1 53% 61%, transparent 61% 68%, #fbbcd1 68% 75%, transparent 75% 80%, #fbbcd1 80% 85%, transparent 85% 90%, #fbbcd1 90% 94%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
pillars
.pillars{ background: linear-gradient(70deg, #1e4c8f 0% 15%, transparent 15% 33%, #1e4c8f 22% 40%, transparent 40% 45%, #1e4c8f 44% 50%, transparent 50% 61%, #4c488d 59% 67%, transparent 67% 83%, #4c488d 81% 92%), linear-gradient(135deg, #1e4c8f 0% 9%, transparent 7% 12%, #1e4c8f 12% 13%, transparent 13% 14%, #1e4c8f 14% 15%, transparent 15% 16%, #1e4c8f 15% 17%, transparent 17% 19%, #1e4c8f 19% 21%, transparent 20% 23%, #1e4c8f 22% 24%, transparent 24% 29%, #1e4c8f 29% 32%, transparent 32% 33%, #1e4c8f 33% 36%, transparent 36% 41%, #1e4c8f 41% 45%, transparent 45% 53%, #1e4c8f 53% 54%, transparent 54% 65%, #1e4c8f 55% 69%, transparent 69% 72%, #1e4c8f 72% 74%, transparent 74% 76%, #1e4c8f 76% 78%, transparent 77% 85%, #1e4c8f 83% 90%, transparent 90% 98%, #1e4c8f 90% 93%), linear-gradient(#dad603, #dad603); background-position: center; background-attachment: fixed; }
blue-stripes
.blue-stripes{ background: linear-gradient(45deg, #5243c0 0% 15%, transparent 15% 17%, #5243c0 17% 22%, transparent 22% 32%, #5243c0 32% 38%, transparent 38% 42%, #5243c0 42% 45%, transparent 45% 46%, #5243c0 46% 49%, transparent 49% 62%, #5243c0 62% 64%, transparent 64% 67%, #5243c0 67% 72%, transparent 72% 80%, #5243c0 80% 87%, transparent 87% 88%, #5243c0 88% 90%, transparent 90% 92%, #5243c0 92% 98%), linear-gradient(0deg, #15d1de 0% 2%, transparent 2% 8%, #15d1de 8% 21%, transparent 21% 23%, #15d1de 23% 47%, transparent 47% 61%, #15d1de 61% 65%, transparent 65% 88%), linear-gradient(#6576f5, #6576f5); background-position: center; background-attachment: fixed; }
whatt
.whatt{ background: linear-gradient(45deg, #381d53 0% 1%, transparent 1% 5%, #381d53 5% 34%, transparent 34% 35%, #381d53 35% 54%, transparent 54% 61%, #381d53 61% 62%, transparent 62% 72%, #381d53 72% 73%, transparent 73% 80%, #381d53 80% 82%, transparent 82% 85%, #381d53 85% 93%), linear-gradient(45deg, #3cbd4c 0% 1%, transparent 1% 10%, #3cbd4c 10% 20%, transparent 20% 31%, #3cbd4c 31% 48%, transparent 48% 56%, #3cbd4c 56% 57%, transparent 57% 64%, #3cbd4c 64% 74%, transparent 74% 78%, #3cbd4c 78% 85%, transparent 85% 92%), linear-gradient(0deg, #df417e 0% 1%, transparent 1% 6%, #df417e 6% 10%, transparent 10% 16%, #df417e 16% 23%, transparent 23% 26%, #df417e 26% 28%, transparent 28% 42%, #df417e 42% 48%, transparent 48% 49%, #df417e 49% 53%, transparent 53% 66%, #df417e 66% 69%, transparent 69% 74%, #df417e 74% 82%, transparent 82% 84%, #df417e 84% 96%), linear-gradient(135deg, #2aa4e3 0% 9%, transparent 9% 10%, #2aa4e3 10% 11%, transparent 11% 12%, #2aa4e3 12% 13%, transparent 13% 18%, #2aa4e3 18% 38%, transparent 38% 47%, #2aa4e3 47% 49%, transparent 49% 52%, #2aa4e3 52% 63%, transparent 63% 75%, #2aa4e3 75% 79%, transparent 79% 87%, #2aa4e3 87% 89%), linear-gradient(#e8be27, #e8be27); background-position: center; background-attachment: fixed; }
purple-stripes
.purple-stripes{ background: linear-gradient(135deg, #bc2900 0% 24%, transparent 23% 36%, #bc2900 34% 47%, transparent 45% 52%, #bc2900 52% 62%, transparent 61% 77%, #bc2900 68% 53%), linear-gradient(0deg, #39046e 0% 7%, transparent 7% 8%, #39046e 8% 16%, transparent 16% 26%, #39046e 26% 31%, transparent 31% 36%, #39046e 36% 37%, transparent 37% 44%, #39046e 44% 48%, transparent 48% 63%, #39046e 63% 74%, transparent 74% 76%, #39046e 76% 79%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
work-shirt
.work-shirt{ background: linear-gradient(57deg, #a7ab31 0% 2%, transparent 2% 5%, #a7ab31 2% 10%, transparent 8% 13%, #a7ab31 11% 16%, transparent 16% 19%, #a7ab31 17% 26%, transparent 22% 33%, #a7ab31 32% 41%, transparent 34% 50%, #a7ab31 48% 51%, transparent 51% 52%, #a7ab31 52% 58%, transparent 58% 66%, #a7ab31 66% 73%, transparent 71% 97%), linear-gradient(90deg, #f6ffd6 0% 1%, transparent 1% 9%, #f6ffd6 9% 14%, transparent 14% 17%, #f6ffd6 17% 21%, transparent 21% 23%, #f6ffd6 23% 31%, transparent 31% 32%, #f6ffd6 32% 48%, transparent 48% 55%, #f6ffd6 55% 65%, transparent 65% 97%), linear-gradient(#c0ebad, #c0ebad); background-position: center; background-attachment: fixed; }
fun-stripes
.fun-stripes{ background: linear-gradient(135deg, #ea713f 0% 3%, transparent 3% 6%, #ea713f 6% 11%, transparent 11% 12%, #ea713f 12% 18%, transparent 18% 20%, #ea713f 20% 21%, transparent 21% 25%, #ea713f 25% 27%, transparent 27% 34%, #ea713f 34% 35%, transparent 35% 37%, #ea713f 37% 39%, transparent 39% 45%, #ea713f 45% 49%, transparent 49% 55%, #ea713f 55% 64%, transparent 64% 83%), linear-gradient(135deg, #59be93 0% 12%, transparent 12% 16%, #59be93 16% 27%, transparent 27% 47%, #59be93 47% 51%, transparent 51% 56%, #59be93 56% 71%, transparent 71% 79%, #59be93 79% 84%, transparent 84% 92%, #59be93 92% 99%), linear-gradient(135deg, #1e2cbb 0% 2%, transparent 2% 3%, #1e2cbb 3% 8%, transparent 8% 11%, #1e2cbb 11% 23%, transparent 23% 24%, #1e2cbb 24% 31%, transparent 31% 33%, #1e2cbb 33% 34%, transparent 34% 40%, #1e2cbb 40% 41%, transparent 41% 52%, #1e2cbb 52% 54%, transparent 54% 57%, #1e2cbb 57% 61%, transparent 61% 65%, #1e2cbb 65% 84%, transparent 84% 85%, #1e2cbb 85% 87%, transparent 87% 92%), linear-gradient(135deg, #c1d500 0% 16%, transparent 16% 25%, #c1d500 25% 26%, transparent 26% 28%, #c1d500 28% 33%, transparent 33% 37%, #c1d500 37% 41%, transparent 41% 43%, #c1d500 43% 50%, transparent 50% 54%, #c1d500 54% 55%, transparent 55% 57%, #c1d500 57% 70%, transparent 70% 77%, #c1d500 77% 82%, transparent 82% 96%, #c1d500 96% 99%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
gentle-stripes
.gentle-stripes{ background: linear-gradient(45deg, #23527e 0% 27%, transparent 27% 28%, #23527e 28% 31%, transparent 31% 38%, #23527e 38% 41%, transparent 41% 44%, #23527e 44% 60%, transparent 60% 78%, #23527e 78% 80%, transparent 80% 82%, #23527e 82% 83%, transparent 83% 84%, #23527e 84% 91%, transparent 91% 92%, #23527e 92% 93%), linear-gradient(45deg, #c18cac 0% 13%, transparent 13% 43%, #c18cac 43% 63%), linear-gradient(#222222, #222222); background-position: center; background-attachment: fixed; }
criss-cross
.criss-cross{ background: linear-gradient(135deg, #124f59 0% 3%, transparent 3% 12%, #124f59 12% 14%, transparent 14% 17%, #124f59 17% 21%, transparent 21% 23%, #124f59 23% 29%, transparent 29% 31%, #124f59 31% 32%, transparent 32% 33%, #124f59 33% 35%, transparent 35% 45%, #124f59 45% 46%, transparent 46% 48%, #124f59 48% 51%, transparent 51% 57%, #124f59 57% 60%, transparent 60% 68%, #124f59 68% 70%, transparent 70% 75%, #124f59 75% 79%, transparent 79% 80%, #124f59 80% 94%, transparent 94% 97%), linear-gradient(45deg, #54d20d 0% 2%, transparent 2% 5%, #54d20d 5% 38%, transparent 38% 46%, #54d20d 46% 53%, transparent 53% 63%, #54d20d 63% 76%, transparent 76% 79%, #54d20d 79% 94%, transparent 94% 99%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
illusion
.illusion{ background: linear-gradient(45deg, #cbf5eb 0% 2%, transparent 2% 6%, #cbf5eb 6% 12%, transparent 12% 26%, #cbf5eb 26% 27%, transparent 27% 40%, #cbf5eb 40% 57%, transparent 57% 66%, #cbf5eb 66% 68%, transparent 68% 70%, #cbf5eb 70% 76%, transparent 76% 81%, #cbf5eb 81% 89%, transparent 89% 99%), linear-gradient(135deg, #c811b7 0% 2%, transparent 2% 9%, #c811b7 9% 13%, transparent 13% 18%, #c811b7 18% 21%, transparent 21% 23%, #c811b7 23% 45%, transparent 45% 47%, #c811b7 47% 48%, transparent 48% 49%, #c811b7 49% 58%, transparent 58% 69%, #c811b7 69% 70%, transparent 70% 96%), linear-gradient(135deg, #1806d7 0% 4%, transparent 4% 7%, #1806d7 7% 9%, transparent 9% 12%, #1806d7 12% 13%, transparent 13% 14%, #1806d7 14% 22%, transparent 22% 32%, #1806d7 32% 36%, transparent 36% 51%, #1806d7 51% 58%, transparent 58% 70%, #1806d7 70% 83%), linear-gradient(90deg, #a03879 0% 15%, transparent 15% 16%, #a03879 16% 21%, transparent 21% 23%, #a03879 23% 30%, transparent 30% 39%, #a03879 39% 43%, transparent 43% 46%, #a03879 46% 58%, transparent 58% 63%, #a03879 63% 64%, transparent 64% 69%, #a03879 69% 72%, transparent 72% 80%, #a03879 80% 85%, transparent 85% 89%, #a03879 89% 90%, transparent 90% 95%, #a03879 95% 98%), linear-gradient(#832d56, #832d56); background-position: center; background-attachment: fixed; }
numbered-depths
.numbered-depths{ background: repeating-linear-gradient(0deg, rgba(1, 1, 1, 0.07) 0px 25px, rgba(1, 1, 1, 0.08) 25px 50px, rgba(0, 0, 0, 0.06) 50px 75px, rgba(0, 0, 0, 0.14) 75px 100px, rgba(0, 0, 0, 0.22) 100px 125px, rgba(1, 1, 1, 0.11) 125px 150px, rgba(1, 1, 1, 0.23) 150px 175px, rgba(0, 0, 0, 0.01) 175px 200px, rgba(1, 1, 1, 0.24) 200px 225px, rgba(0, 0, 0, 0.19) 225px 250px, rgba(1, 1, 1, 0.15) 250px 275px, rgba(0, 0, 0, 0.13) 275px 300px, rgba(0, 0, 0, 0.17) 300px 325px, rgba(1, 1, 1, 0.23) 325px 350px, rgba(0, 0, 0, 0.24) 350px 375px, rgba(1, 1, 1, 0.24) 375px 400px, rgba(0, 0, 0, 0.2) 400px 425px, rgba(1, 1, 1, 0.16) 425px 450px, rgba(0, 0, 0, 0.24) 450px 475px, rgba(1, 1, 1, 0.21) 475px 500px, rgba(0, 0, 0, 0.17) 500px 525px, rgba(0, 0, 0, 0.02) 525px 550px), repeating-linear-gradient(90deg, rgba(1, 1, 1, 0.14) 0px 25px, rgba(0, 0, 0, 0.01) 25px 50px, rgba(1, 1, 1, 0.22) 50px 75px, rgba(0, 0, 0, 0.2) 75px 100px, rgba(0, 0, 0, 0.19) 100px 125px, rgba(0, 0, 0, 0.09) 125px 150px, rgba(1, 1, 1, 0.04) 150px 175px, rgba(1, 1, 1, 0.16) 175px 200px, rgba(0, 0, 0, 0.07) 200px 225px, rgba(1, 1, 1, 0.01) 225px 250px, rgba(1, 1, 1, 0.05) 250px 275px, rgba(1, 1, 1, 0.1) 275px 300px, rgba(1, 1, 1, 0.02) 300px 325px, rgba(0, 0, 0, 0.22) 325px 350px, rgba(0, 0, 0, 0.17) 350px 375px, rgba(1, 1, 1, 0.11) 375px 400px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.11) 0px 27px, rgba(1, 1, 1, 0.06) 27px 54px, rgba(0, 0, 0, 0.01) 54px 81px, rgba(1, 1, 1, 0.02) 81px 108px, rgba(1, 1, 1, 0.04) 108px 135px, rgba(0, 0, 0, 0.2) 135px 162px, rgba(0, 0, 0, 0.18) 162px 189px, rgba(0, 0, 0, 0.04) 189px 216px, rgba(0, 0, 0, 0.06) 216px 243px, rgba(0, 0, 0, 0.21) 243px 270px, rgba(0, 0, 0, 0.13) 270px 297px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0px 27px, rgba(0, 0, 0, 0.03) 27px 54px, rgba(1, 1, 1, 0.06) 54px 81px, rgba(0, 0, 0, 0.11) 81px 108px, rgba(1, 1, 1, 0.18) 108px 135px, rgba(1, 1, 1, 0.22) 135px 162px, rgba(0, 0, 0, 0.21) 162px 189px, rgba(0, 0, 0, 0.06) 189px 216px, rgba(1, 1, 1, 0.22) 216px 243px, rgba(0, 0, 0, 0.12) 243px 270px, rgba(1, 1, 1, 0.09) 270px 297px, rgba(1, 1, 1, 0.21) 297px 324px, rgba(0, 0, 0, 0.14) 324px 351px, rgba(1, 1, 1, 0.06) 351px 378px, rgba(0, 0, 0, 0.24) 378px 405px, rgba(0, 0, 0, 0.11) 405px 432px, rgba(0, 0, 0, 0.08) 432px 459px, rgba(1, 1, 1, 0.05) 459px 486px), repeating-linear-gradient(45deg, #626d70 0px 37px, transparent 37px 83px, #647062 83px 93px, transparent 93px 119px), repeating-linear-gradient(45deg, #288dcc 0px 43px, transparent 43px 47px, #288dcc 47px 73px, transparent 73px 96px, #288dcc 96px 104px, transparent 104px 119px, #2856cc 119px 164px, transparent 164px 182px, #28cc30 182px 207px, transparent 207px 224px, #28cc66 224px 236px, transparent 236px 255px, #28cc30 255px 294px, transparent 294px 302px, #28cc66 302px 325px, transparent 325px 358px, #2856cc 358px 404px, transparent 404px 451px, #28cc30 451px 468px, transparent 468px 507px), repeating-linear-gradient(45deg, #313b16 0px 31px, transparent 31px 65px, #313b16 65px 105px, transparent 105px 119px, #183b16 119px 133px, transparent 133px 177px, #253b16 177px 202px, transparent 202px 244px, #253b16 244px 277px, transparent 277px 294px, #183b16 294px 311px, transparent 311px 355px, #3b3816 355px 378px, transparent 378px 389px), repeating-linear-gradient(45deg, #59c480 0px 40px, transparent 40px 72px, #59c4a4 72px 110px, transparent 110px 157px, #59c4a4 157px 169px, transparent 169px 179px), linear-gradient(#222222, #222222); background-position: center; background-attachment: fixed; }
purple-brit
.purple-brit{ background: linear-gradient(136deg, #bc290000 0% 24%, transparent 23% 36%, #bc290000 34% 47%, transparent 45% 52%, #bc290000 52% 62%, transparent 61% 77%, #bc290000 68% 53%), linear-gradient(20deg, #39046e 0% 7%, transparent 7% 8%, #39046e 8% 16%, transparent 16% 26%, #39046e 26% 31%, transparent 31% 36%, #39046e 36% 37%, transparent 37% 44%, #39046e 44% 48%, transparent 48% 63%, #39046e 63% 74%, transparent 74% 76%, #39046e 76% 79%), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
user-icon
.user-icon{ height: 98vh; background-image: radial-gradient(circle at bottom center, rgb(11,117,236) 0%, rgb(11,117,236) 32%,transparent 32%, transparent 40%,transparent 40%, transparent 100%),radial-gradient(circle at center center, rgb(11,117,236) 0%, rgb(11,117,236) 23%,transparent 23%, transparent 36%,transparent 36%, transparent 100%),linear-gradient(90deg, rgb(10,97,206),rgb(10,97,206)); background-size: 75px 75px; background-position: center; background-attachment: fixed; }
legal-pad
.legal-pad{ background-image: linear-gradient(180deg, rgb(106,42,27), rgb(106,42,27) 6%, transparent calc(6% + 2px)),linear-gradient(90deg, transparent 0%, transparent 12%, rgb(245,196,146) 12%, rgb(245,196,146) calc(12% + 2px), transparent calc(12% + 2px), transparent calc(12% + 6px), rgb(245,196,146) calc(12% + 6px), rgb(245,196,146) calc(12% + 8px), transparent calc(12% + 8px), transparent 100%), linear-gradient(180deg, rgb(251,238,159) 22%, transparent 22%), repeating-linear-gradient(180deg, rgb(201,215,152) 0px, rgb(201,215,152) 2px, transparent 2px, transparent 36px), linear-gradient(rgb(251,238,159),rgb(251,238,159)); height: 90vh; background-position: center; background-attachment: fixed; }
from-beyond
.from-beyond { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0px 11px, rgba(0, 0, 0, 0.03) 11px 22px, rgba(1, 1, 1, 0.08) 22px 33px, rgba(0, 0, 0, 0.05) 33px 44px, rgba(0, 0, 0, 0.08) 44px 55px, rgba(0, 0, 0, 0.03) 55px 66px, rgba(1, 1, 1, 0.02) 66px 77px, rgba(0, 0, 0, 0.1) 77px 88px, rgba(0, 0, 0, 0.09) 88px 99px, rgba(0, 0, 0, 0.05) 99px 110px, rgba(1, 1, 1, 0) 110px 121px, rgba(1, 1, 1, 0.01) 121px 132px, rgba(1, 1, 1, 0.01) 132px 143px, rgba(1, 1, 1, 0.05) 143px 154px, rgba(0, 0, 0, 0.07) 154px 165px, rgba(0, 0, 0, 0.02) 165px 176px, rgba(0, 0, 0, 0.08) 176px 187px, rgba(1, 1, 1, 0) 187px 198px, rgba(1, 1, 1, 0.06) 198px 209px, rgba(1, 1, 1, 0.1) 209px 220px, rgba(0, 0, 0, 0.09) 220px 231px, rgba(1, 1, 1, 0.04) 231px 242px, rgba(0, 0, 0, 0.07) 242px 253px, rgba(0, 0, 0, 0.08) 253px 264px, rgba(0, 0, 0, 0.02) 264px 275px, rgba(0, 0, 0, 0.02) 275px 286px, rgba(1, 1, 1, 0.01) 286px 297px, rgba(1, 1, 1, 0) 297px 308px, rgba(1, 1, 1, 0.08) 308px 319px), repeating-linear-gradient(45deg, rgba(1, 1, 1, 0.09) 0px 11px, rgba(1, 1, 1, 0.07) 11px 22px, rgba(1, 1, 1, 0.08) 22px 33px, rgba(0, 0, 0, 0.04) 33px 44px, rgba(0, 0, 0, 0.03) 44px 55px, rgba(0, 0, 0, 0.02) 55px 66px, rgba(1, 1, 1, 0.04) 66px 77px, rgba(1, 1, 1, 0.08) 77px 88px, rgba(1, 1, 1, 0.08) 88px 99px, rgba(0, 0, 0, 0.06) 99px 110px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.07) 0px 16px, rgba(0, 0, 0, 0.01) 16px 32px, rgba(0, 0, 0, 0.09) 32px 48px, rgba(1, 1, 1, 0.09) 48px 64px, rgba(1, 1, 1, 0.01) 64px 80px, rgba(1, 1, 1, 0) 80px 96px, rgba(0, 0, 0, 0.1) 96px 112px, rgba(1, 1, 1, 0) 112px 128px, rgba(1, 1, 1, 0.03) 128px 144px, rgba(1, 1, 1, 0) 144px 160px, rgba(0, 0, 0, 0.02) 160px 176px, rgba(1, 1, 1, 0.05) 176px 192px, rgba(1, 1, 1, 0.01) 192px 208px, rgba(0, 0, 0, 0.03) 208px 224px, rgba(0, 0, 0, 0.08) 224px 240px, rgba(0, 0, 0, 0.08) 240px 256px, rgba(1, 1, 1, 0.08) 256px 272px), repeating-linear-gradient(135deg, rgba(1, 1, 1, 0.08) 0px 7px, rgba(1, 1, 1, 0.02) 7px 14px, rgba(1, 1, 1, 0.09) 14px 21px, rgba(0, 0, 0, 0) 21px 28px, rgba(1, 1, 1, 0.1) 28px 35px, rgba(1, 1, 1, 0.07) 35px 42px, rgba(0, 0, 0, 0.01) 42px 49px, rgba(0, 0, 0, 0.08) 49px 56px, rgba(0, 0, 0, 0.05) 56px 63px, rgba(1, 1, 1, 0.03) 63px 70px, rgba(1, 1, 1, 0.09) 70px 77px, rgba(1, 1, 1, 0.02) 77px 84px, rgba(0, 0, 0, 0) 84px 91px, rgba(0, 0, 0, 0.08) 91px 98px, rgba(0, 0, 0, 0.08) 98px 105px, rgba(1, 1, 1, 0.05) 105px 112px, rgba(1, 1, 1, 0.02) 112px 119px, rgba(1, 1, 1, 0.09) 119px 126px, rgba(1, 1, 1, 0.07) 126px 133px, rgba(1, 1, 1, 0.07) 133px 140px, rgba(1, 1, 1, 0.08) 140px 147px, rgba(1, 1, 1, 0.02) 147px 154px, rgba(0, 0, 0, 0.08) 154px 161px), linear-gradient(44deg, #2d240c, #ba1456); background-position: center; background-attachment: fixed; }
pure-candycane
.pure-candycane { background: repeating-linear-gradient(135deg, #e61832 0px 5px, transparent 5px 27px, #e61832 27px 49px, transparent 49px 72px, #e61832 72px 82px, transparent 82px 103px, #e61832 103px 111px, transparent 111px 132px, #e61832 132px 150px, transparent 150px 157px, #e61832 157px 162px, transparent 162px 186px, #e61832 186px 201px, transparent 201px 216px, #e61832 216px 223px, transparent 223px 229px), linear-gradient(white, white); background-position: center; background-attachment: fixed; }
baby-stripes
.baby-stripes { background: repeating-linear-gradient(67.5deg, #86e0c2 0px 19px, transparent 19px 39px, #86a4e0 39px 87px, transparent 87px 118px, #86c2e0 118px 130px, transparent 130px 179px, #86e086 179px 193px, transparent 193px 241px, #86a4e0 241px 289px, transparent 289px 325px, #86e0a4 325px 333px, transparent 333px 350px, #86e0c2 350px 392px, transparent 392px 411px, #86e086 411px 426px, transparent 426px 447px), linear-gradient(#3fc2b1, #3fc2b1); background-position: center; background-attachment: fixed; }
perfect-camo
.perfect-camo { background: repeating-linear-gradient(45deg, #6d9d60 0px 44px, transparent 44px 50px, #609d7d 50px 82px, transparent 82px 100px), linear-gradient(#021431, #021431); background-position: center; background-attachment: fixed; }
cool-purp
.cool-purp { background: repeating-linear-gradient(135deg, #ea30d7 0px 47px, transparent 47px 68px, #bf30ea 68px 80px, transparent 80px 115px), linear-gradient(#222222, #222222); background-position: center; background-attachment: fixed; }
cool-pure-zap
.cool-pure-zap { background: repeating-linear-gradient(135deg, #d4bc2a 0px 47px, transparent 47px 68px, #d4bc2a 68px 80px, transparent 80px 115px), linear-gradient(#07060f, #07060f); background-position: center; background-attachment: fixed; }
green-tiger
.green-tiger { background: repeating-linear-gradient(135deg, #fc7821 0px 12px, transparent 12px 19px, #fc7821 19px 42px, transparent 42px 56px, #fc7821 56px 61px, transparent 61px 82px, #fc7821 82px 97px, transparent 97px 108px, #fc7821 108px 113px, transparent 113px 134px, #fc7821 134px 153px, transparent 153px 156px, #fc7821 156px 176px, transparent 176px 183px, #fc7821 183px 192px, transparent 192px 215px, #fc7821 215px 230px, transparent 230px 251px, #fc7821 251px 258px, transparent 258px 270px, #fc7821 270px 292px, transparent 292px 312px, #fc7821 312px 325px, transparent 325px 339px, #fc7821 339px 360px, transparent 360px 380px, #fc7821 380px 391px, transparent 391px 397px), repeating-linear-gradient(135deg, #7ff531 0px 22px, transparent 22px 44px), repeating-linear-gradient(135deg, #bade13 0px 9px, transparent 9px 32px, #bade13 32px 38px, transparent 38px 44px, #bade13 44px 47px, transparent 47px 57px, #bade13 57px 70px, transparent 70px 80px, #bade13 80px 96px, transparent 96px 117px, #bade13 117px 128px, transparent 128px 152px, #bade13 152px 159px, transparent 159px 178px, #bade13 178px 191px, transparent 191px 208px, #bade13 208px 232px, transparent 232px 241px, #bade13 241px 251px, transparent 251px 272px, #bade13 272px 282px, transparent 282px 292px, #bade13 292px 303px, transparent 303px 316px, #bade13 316px 332px, transparent 332px 341px), linear-gradient(#222222, #222222); background-position: center; background-attachment: fixed; }
pink-and-purple
.pink-and-purple { background: repeating-linear-gradient(90deg, #f1f15f 0px 13px, transparent 13px 25px, #f1c15f 25px 30px, transparent 30px 51px, #f1c15f 51px 65px, transparent 65px 73px), linear-gradient(#a337a1, #a337a1); background-position: center; background-attachment: fixed; }
whoa
.whoa { background: repeating-linear-gradient(135deg, #449300 0px 28px, transparent 28px 65px, #4e0093 65px 107px, transparent 107px 150px, #449300 150px 198px, transparent 198px 230px), repeating-linear-gradient(135deg, #c48ad8 0px 6px, transparent 6px 13px, #9dd88a 13px 25px, transparent 25px 50px, #9dd88a 50px 56px, transparent 56px 77px, #c48ad8 77px 106px, transparent 106px 119px, #9dd88a 119px 162px, transparent 162px 178px, #9dd88a 178px 207px, transparent 207px 215px, #9dd88a 215px 227px, transparent 227px 275px, #9dd88a 275px 279px, transparent 279px 318px), repeating-linear-gradient(135deg, #0b0704 0px 24px, transparent 24px 42px, #04080b 42px 50px, transparent 50px 65px, #04080b 65px 114px, transparent 114px 154px, #0b0704 154px 192px, transparent 192px 196px, #04080b 196px 235px, transparent 235px 279px, #04080b 279px 310px, transparent 310px 342px, #04080b 342px 371px, transparent 371px 414px, #04080b 414px 444px, transparent 444px 457px), repeating-linear-gradient(135deg, #e4e951 0px 27px, transparent 27px 67px, #5651e9 67px 90px, transparent 90px 111px, #e4e951 111px 140px, transparent 140px 162px, #5651e9 162px 182px, transparent 182px 194px, #5651e9 194px 217px, transparent 217px 244px, #5651e9 244px 290px, transparent 290px 317px, #5651e9 317px 359px, transparent 359px 394px), linear-gradient(#222222, #222222);background-position: center; background-attachment: fixed; }
cool-cover
.cool-cover { background: repeating-linear-gradient(135deg, #32f6fd 0px 33px, transparent 33px 71px, #32b3fd 71px 110px, transparent 110px 154px, #32fd38 154px 161px, transparent 161px 205px), repeating-linear-gradient(0deg, #e1e9e2 0px 17px, transparent 17px 54px, #e3e9e1 54px 101px, transparent 101px 135px, #e1e9e5 135px 153px, transparent 153px 158px, #e1e8e9 158px 162px, transparent 162px 185px, #e1e8e9 185px 224px, transparent 224px 241px, #e1e9e2 241px 260px, transparent 260px 275px, #e1e9e7 275px 309px, transparent 309px 323px, #e1e8e9 323px 337px, transparent 337px 367px), repeating-linear-gradient(90deg, #7c51bd 0px 29px, transparent 29px 64px, #7c51bd 64px 95px, transparent 95px 124px, #a051bd 124px 158px, transparent 158px 164px, #bd516e 164px 209px, transparent 209px 232px, #bd516e 232px 278px, transparent 278px 282px), linear-gradient(#83e798, #83e798);background-position: center; background-attachment: fixed; }
strange-prison
.strange-prison { background: repeating-linear-gradient(90deg, #021115 46px 61px, transparent 52px 70px, #150211 72px 92px, transparent 95px 102px, #150211 102px 117px, transparent 117px 152px, #150211 152px 185px, transparent 185px 227px, #150211 227px 243px, transparent 243px 271px, #111502 271px 281px, transparent 281px 306px, #111502 306px 341px, transparent 341px 376px), repeating-linear-gradient(0deg, #060706 0px 25px, transparent 25px 53px, #070606 53px 66px, transparent 66px 85px, #070606 85px 95px, transparent 95px 131px, #070606 131px 150px, transparent 150px 171px, #070606 171px 198px, transparent 198px 246px, #060706 246px 262px, transparent 262px 303px, #060607 303px 346px, transparent 346px 364px), repeating-linear-gradient(90deg, #1fde0e 0px 27px, transparent 27px 65px, #de0e1f 65px 108px, transparent 108px 151px, #de0e1f 151px 195px, transparent 195px 205px, #de0e1f 205px 212px, transparent 212px 260px), repeating-linear-gradient(135deg, #803f09 0px 14px, transparent 14px 43px, #09803f 43px 62px, transparent 62px 71px, #803f09 71px 110px, transparent 110px 146px, #3f0980 146px 174px, transparent 174px 205px, #09803f 205px 249px, transparent 249px 274px, #803f09 274px 310px, transparent 310px 355px, #3f0980 355px 363px, transparent 363px 391px), linear-gradient(#7e9590, #7e9590);background-position: center; background-attachment: fixed; }
flamingo-green
.flamingo-green { background: repeating-linear-gradient(135deg, #1cee97 0px 36px, transparent 36px 72px, #1cee97 72px 83px, transparent 83px 87px, #1cee97 87px 126px, transparent 126px 173px, #ee1c74 173px 186px, transparent 186px 235px, #1cee97 235px 249px, transparent 249px 276px, #1cee97 276px 324px, transparent 324px 335px, #ee1c74 335px 341px, transparent 341px 371px), repeating-linear-gradient(135deg, #3c4046 0px 49px, transparent 49px 65px, #46433c 65px 86px, transparent 86px 129px, #46433c 129px 154px, transparent 154px 179px, #3c4046 179px 188px, transparent 188px 211px, #46433c 211px 220px, transparent 220px 250px, #46433c 250px 285px, transparent 285px 303px), linear-gradient(#49b135, #49b135);background-position: center; background-attachment: fixed; }
corners
.corners { background: repeating-linear-gradient(90deg, rgba(114, 191, 190, 0.03617134) 0px 37px, rgba(157, 191, 114, 0.34135727) 37px 74px), repeating-linear-gradient(0deg, #1af9f2 0px 37px, #cff366 37px 74px);background-position: center; background-attachment: fixed; }
green-checkers
.green-checkers { background: repeating-linear-gradient(90deg, rgba(143, 225, 204, 0.09067705) 0px 22px, rgba(152, 222, 81, 0.43697237) 22px 44px), repeating-linear-gradient(0deg, #6e8e60 0px 22px, #07435b 22px 44px);background-position: center; background-attachment: fixed; }
green-window
.green-window { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0px 36px, rgba(255, 255, 255, 0.31) 36px 72px, rgba(255, 255, 255, 0.2) 72px 108px, rgba(255, 255, 255, 0.1) 108px 144px, rgba(255, 255, 255, 0.04) 144px 180px, rgba(255, 255, 255, 0.41) 180px 216px, rgba(255, 255, 255, 0.13) 216px 252px, rgba(255, 255, 255, 0.43) 252px 288px, rgba(255, 255, 255, 0.1) 288px 324px, rgba(255, 255, 255, 0.29) 324px 360px, rgba(255, 255, 255, 0.18) 360px 396px, rgba(255, 255, 255, 0.01) 396px 432px, rgba(255, 255, 255, 0.02) 432px 468px, rgba(255, 255, 255, 0.45) 468px 504px, rgba(255, 255, 255, 0.25) 504px 540px, rgba(255, 255, 255, 0.02) 540px 576px, rgba(255, 255, 255, 0.2) 576px 612px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.33) 0px 36px, rgba(255, 255, 255, 0.1) 36px 72px, rgba(255, 255, 255, 0.16) 72px 108px, rgba(255, 255, 255, 0.09) 108px 144px, rgba(255, 255, 255, 0.3) 144px 180px, rgba(255, 255, 255, 0.34) 180px 216px, rgba(255, 255, 255, 0.15) 216px 252px, rgba(255, 255, 255, 0.26) 252px 288px, rgba(255, 255, 255, 0.31) 288px 324px, rgba(255, 255, 255, 0.19) 324px 360px, rgba(255, 255, 255, 0.1) 360px 396px, rgba(255, 255, 255, 0.01) 396px 432px, rgba(255, 255, 255, 0.43) 432px 468px, rgba(255, 255, 255, 0.34) 468px 504px, rgba(255, 255, 255, 0.33) 504px 540px, rgba(255, 255, 255, 0.12) 540px 576px, rgba(255, 255, 255, 0.37) 576px 612px, rgba(255, 255, 255, 0.38) 612px 648px, rgba(255, 255, 255, 0.04) 648px 684px, rgba(255, 255, 255, 0.35) 684px 720px, rgba(255, 255, 255, 0.08) 720px 756px, rgba(255, 255, 255, 0.46) 756px 792px), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0px 36px, rgba(255, 255, 255, 0.28) 36px 72px, rgba(255, 255, 255, 0.12) 72px 108px, rgba(255, 255, 255, 0.4) 108px 144px, rgba(255, 255, 255, 0.4) 144px 180px, rgba(255, 255, 255, 0.4) 180px 216px, rgba(255, 255, 255, 0.06) 216px 252px, rgba(255, 255, 255, 0.4) 252px 288px, rgba(255, 255, 255, 0.3) 288px 324px, rgba(255, 255, 255, 0.25) 324px 360px, rgba(255, 255, 255, 0.3) 360px 396px, rgba(255, 255, 255, 0.22) 396px 432px), linear-gradient(135deg, #a6cf78, #077524);background-position: center; background-attachment: fixed; }
quilt
.quilt { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0px 34px, rgba(0, 0, 0, 0.19) 34px 68px, rgba(1, 1, 1, 0.1) 68px 102px, rgba(1, 1, 1, 0.07) 102px 136px, rgba(1, 1, 1, 0.01) 136px 170px, rgba(0, 0, 0, 0.01) 170px 204px, rgba(1, 1, 1, 0.17) 204px 238px, rgba(0, 0, 0, 0.03) 238px 272px, rgba(1, 1, 1, 0.19) 272px 306px, rgba(1, 1, 1, 0.13) 306px 340px, rgba(1, 1, 1, 0.15) 340px 374px, rgba(1, 1, 1, 0.15) 374px 408px, rgba(0, 0, 0, 0.14) 408px 442px, rgba(1, 1, 1, 0.07) 442px 476px, rgba(1, 1, 1, 0.06) 476px 510px, rgba(1, 1, 1, 0.06) 510px 544px, rgba(1, 1, 1, 0.03) 544px 578px, rgba(1, 1, 1, 0.23) 578px 612px, rgba(0, 0, 0, 0.03) 612px 646px, rgba(0, 0, 0, 0.1) 646px 680px, rgba(1, 1, 1, 0.13) 680px 714px, rgba(0, 0, 0, 0.18) 714px 748px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0px 34px, rgba(0, 0, 0, 0.23) 34px 68px, rgba(0, 0, 0, 0.01) 68px 102px, rgba(1, 1, 1, 0.11) 102px 136px, rgba(1, 1, 1, 0.21) 136px 170px, rgba(0, 0, 0, 0.05) 170px 204px, rgba(0, 0, 0, 0.22) 204px 238px, rgba(1, 1, 1, 0.07) 238px 272px, rgba(0, 0, 0, 0.06) 272px 306px, rgba(1, 1, 1, 0.15) 306px 340px, rgba(1, 1, 1, 0.12) 340px 374px, rgba(0, 0, 0, 0.06) 374px 408px, rgba(0, 0, 0, 0.19) 408px 442px), repeating-linear-gradient(135deg, rgba(1, 1, 1, 0.06) 0px 37px, rgba(1, 1, 1, 0) 37px 74px, rgba(0, 0, 0, 0.07) 74px 111px, rgba(0, 0, 0, 0.13) 111px 148px, rgba(1, 1, 1, 0.05) 148px 185px, rgba(0, 0, 0, 0.01) 185px 222px, rgba(0, 0, 0, 0.06) 222px 259px, rgba(0, 0, 0, 0.14) 259px 296px, rgba(0, 0, 0, 0.17) 296px 333px, rgba(0, 0, 0, 0.01) 333px 370px, rgba(0, 0, 0, 0.09) 370px 407px, rgba(0, 0, 0, 0.16) 407px 444px, rgba(0, 0, 0, 0.03) 444px 481px, rgba(0, 0, 0, 0.13) 481px 518px, rgba(0, 0, 0, 0.2) 518px 555px, rgba(1, 1, 1, 0.21) 555px 592px, rgba(0, 0, 0, 0.21) 592px 629px, rgba(0, 0, 0, 0.03) 629px 666px), repeating-linear-gradient(45deg, rgba(1, 1, 1, 0.15) 0px 33px, rgba(0, 0, 0, 0.25) 33px 66px, rgba(0, 0, 0, 0.1) 66px 99px, rgba(1, 1, 1, 0.03) 99px 132px, rgba(0, 0, 0, 0) 132px 165px, rgba(0, 0, 0, 0.25) 165px 198px, rgba(1, 1, 1, 0.07) 198px 231px, rgba(1, 1, 1, 0.07) 231px 264px, rgba(1, 1, 1, 0.22) 264px 297px, rgba(0, 0, 0, 0.23) 297px 330px, rgba(1, 1, 1, 0.01) 330px 363px, rgba(0, 0, 0, 0.22) 363px 396px, rgba(0, 0, 0, 0.03) 396px 429px, rgba(0, 0, 0, 0.1) 429px 462px, rgba(0, 0, 0, 0.12) 462px 495px, rgba(0, 0, 0, 0.2) 495px 528px, rgba(1, 1, 1, 0.19) 528px 561px), linear-gradient(0deg, #4998b6, #4695d6);background-position: center; background-attachment: fixed; }
cor-sthher
.cor-sthher { background: repeating-linear-gradient(149deg, rgba(114, 191, 190, 0.03617134) 0px 37px, rgb(53 159 18 / 50%) 37px 74px), repeating-linear-gradient(18deg, #191b58 0px 37px, #ad3142 37px 74px); background-position: center; background-attachment: fixed; }
ray-of-light
.ray-of-light { background: repeating-linear-gradient(0deg, rgba(1, 1, 1, 0.1) 0px 45px, rgba(0, 0, 0, 0.2) 45px 90px, rgba(1, 1, 1, 0.05) 90px 135px, rgba(1, 1, 1, 0.15) 135px 180px, rgba(1, 1, 1, 0.18) 180px 225px, rgba(0, 0, 0, 0.14) 225px 270px, rgba(0, 0, 0, 0.14) 270px 315px, rgba(1, 1, 1, 0.13) 315px 360px, rgba(0, 0, 0, 0.2) 360px 405px, rgba(0, 0, 0, 0.02) 405px 450px, rgba(1, 1, 1, 0) 450px 495px, rgba(0, 0, 0, 0.09) 495px 540px), repeating-linear-gradient(90deg, rgba(1, 1, 1, 0.17) 0px 45px, rgba(0, 0, 0, 0.06) 45px 90px, rgba(1, 1, 1, 0.11) 90px 135px, rgba(0, 0, 0, 0.18) 135px 180px, rgba(1, 1, 1, 0.09) 180px 225px, rgba(1, 1, 1, 0.02) 225px 270px, rgba(0, 0, 0, 0.08) 270px 315px, rgba(1, 1, 1, 0.05) 315px 360px, rgba(1, 1, 1, 0.07) 360px 405px, rgba(1, 1, 1, 0.02) 405px 450px, rgba(0, 0, 0, 0.07) 450px 495px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0px 46px, rgba(1, 1, 1, 0.16) 46px 92px, rgba(0, 0, 0, 0.04) 92px 138px, rgba(0, 0, 0, 0.09) 138px 184px, rgba(1, 1, 1, 0.16) 184px 230px, rgba(1, 1, 1, 0.02) 230px 276px, rgba(1, 1, 1, 0.18) 276px 322px, rgba(1, 1, 1, 0.03) 322px 368px, rgba(1, 1, 1, 0.02) 368px 414px, rgba(0, 0, 0, 0.04) 414px 460px), repeating-linear-gradient(45deg, rgba(1, 1, 1, 0.1) 0px 45px, rgba(1, 1, 1, 0.2) 45px 90px, rgba(0, 0, 0, 0.14) 90px 135px, rgba(1, 1, 1, 0.02) 135px 180px, rgba(1, 1, 1, 0.1) 180px 225px, rgba(0, 0, 0, 0.03) 225px 270px, rgba(1, 1, 1, 0.08) 270px 315px, rgba(1, 1, 1, 0.09) 315px 360px, rgba(1, 1, 1, 0.01) 360px 405px, rgba(1, 1, 1, 0.1) 405px 450px, rgba(1, 1, 1, 0.14) 450px 495px, rgba(0, 0, 0, 0.18) 495px 540px, rgba(1, 1, 1, 0.13) 540px 585px, rgba(0, 0, 0, 0.08) 585px 630px, rgba(0, 0, 0, 0.02) 630px 675px, rgba(0, 0, 0, 0.19) 675px 720px, rgba(1, 1, 1, 0.18) 720px 765px, rgba(0, 0, 0, 0.02) 765px 810px, rgba(1, 1, 1, 0) 810px 855px, rgba(0, 0, 0, 0.12) 855px 900px, rgba(0, 0, 0, 0.07) 900px 945px, rgba(0, 0, 0, 0.15) 945px 990px), repeating-linear-gradient(45deg, #fbe817 0px 21px, transparent 21px 34px, #fb9c17 34px 59px, transparent 59px 107px, #fb9c17 107px 119px, transparent 119px 159px, #fb172a 159px 200px, transparent 200px 246px), linear-gradient(0deg, #932242, #c146cb, #037b5b); background-position: center; background-attachment: fixed; }
myts-kolp
.myts-kolp { background: linear-gradient(15deg, #d33f34 50%, #a61322 50.1%);background-position: center; background-attachment: fixed; }
myth-amareh
.myth-amareh { background: linear-gradient(-50deg, #57bf3e 50%, #291b9d 50.1%); background-position: center; background-attachment: fixed; }
police-line
.police-line{ --sz: 21px; --c1: #181818; --c2: #ffda07; --c3: #ffc107; --c4: #0006; --ts: 50% / calc(var(--sz) * 5) calc(var(--sz) * 10); background: linear-gradient(180deg, var(--c4) 0 14%, #fff0 0 100%) var(--ts), conic-gradient(from 0deg at 0% 14%, var(--c1) 0 20deg, #fff0 0 100%) var(--ts), conic-gradient(from 20deg at 74% 50%, var(--c3) 0 70deg, #fff0 0 100%) var(--ts), conic-gradient(from 90deg at 50% 50%, var(--c1) 0 70deg, #fff0 0 100%) var(--ts), conic-gradient( from 90deg at 0% 50%, var(--c2) 0 70deg, var(--c1) 0 90deg, #fff0 0 100% ) var(--ts), linear-gradient( 110deg, var(--c3) 0 33%, var(--c1) 0 66%, var(--c2) 0 90%, black 0 100% ) var(--ts); background-position: center; background-attachment: fixed; }
rubber-flooring-pattern
.rubber-flooring-pattern { --u: 2.5vmin; --c1: hsl(0deg 0% 0%); --c2: hsl(212deg 4% 9%); --c3: hsl(212deg 7% 36%); --gp: 50% / calc(var(--u) * 5) calc(var(--u) * 10); --bp: calc(var(--u) * -2.5) calc(var(--u) * -5); height: 100vh; --bg: radial-gradient(circle at 50% 25%, var(--c2) 23%, #fff0 25% 100%) var(--gp), conic-gradient(from 270deg at 34% 46%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 45deg at 66% 46%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 180deg at 50% 80%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 135deg at 50% 80%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from 0deg at 0% 20%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), conic-gradient(from -45deg at 100% 20%, var(--c2) 0 12.5%, #fff0 0 100%) var(--gp), linear-gradient( 180deg, var(--c2) 0 4.5%, #fff0 0 45.25%, var(--c2) 0 50%, #fff0 0% 100% ) var(--gp), radial-gradient( circle at 50% 25%, #fff0 0 25%, var(--c2) 26% 32%, #fff0 0 100% ) var(--gp), linear-gradient(165deg, var(--c3) -15%, var(--c1) 44%, #fff0 0 100%) var(--gp), linear-gradient(180deg, var(--c1) 50%, #fff0 0 100%) var(--gp); background: var(--bg), var(--bg); background-position: var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-color: var(--c2); }
spinner-tesselated
.spinner-tesselated { --units: 2vmin; --u-cir: calc(var(--units) * 12.5); --u-bac: calc(var(--units) * 10.125); --u-par: calc(var(--units) * 5); --spl: #4456b9; --spd: #293579; --bgc: #b2beff; --gp-pos: 50% / calc(var(--units) * 22.315) calc(var(--units) * 12.925); --cir-in: var(--spl) 0 15%, var(--spd) 16% 16%, var(--spl) 17% 24%, #fff0 0 100%; --cir-out: var(--bgc) 0 5%, var(--spd) 5.1% 7%, var(--spd) 7.1% 9%, var(--spl) 9.1% 14%, var(--spd) 14.1% 18%, var(--spl) 17.1% 24%, #fff0 0 100%; --cir-bac: var(--bgc) 0 24%, #fff0 24.5% 100%; --cir-par: var(--spl) 0 24%, #fff0 24.5% 100%; height: 100vh; background: radial-gradient(var(--u-cir) circle at 21% -21%, var(--cir-in)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 21% 79%, var(--cir-in)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 71% 29%, var(--cir-in)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 50% 50%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 92% 50%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 21% 37%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at -8% 50%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 71% 87%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 71% -13%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 42% 0%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 0% 0%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 100% 0%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 0% 100%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 100% 100%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-cir) circle at 42% 100%, var(--cir-out)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 42% 58%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 0% 58%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 21% 21%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 71% 71%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 50% 108%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 50% 8%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 92% 8%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-bac) circle at 92% 108%, var(--cir-bac)) var(--gp-pos), radial-gradient(var(--u-par) circle at 30% 58%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 12% 58%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 37% 75%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 5% 75%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 26% 5%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 16% 5%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 26% 105%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 16% 105%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 62% 9%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 80% 9%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 66% 54%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 76% 54%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 55% 25%, var(--cir-par)) var(--gp-pos), radial-gradient(var(--u-par) circle at 87% 25%, var(--cir-par)) var(--gp-pos); background-color: var(--bgc); }
brick-tessellated
.brick-tessellated { --units: 1.5vmax; --brick1: #cc0000; --brick2: #dd0000; --lines: #565656; --gp-ln: 50% / calc(var(--units) * 10) calc(var(--units) * 5); --gp-cn: 50% / calc(var(--units) * 5) calc(var(--units) * 5); height: 100vh; background: repeating-conic-gradient( from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100% ) var(--gp-cn), repeating-linear-gradient( 180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100% ) var(--gp-ln), repeating-linear-gradient( 90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100% ) var(--gp-ln); }
crooked-squares-tessellated
.crooked-squares-tessellated { --u: 2vmin; --hue: hue-rotate(0deg); --c1: #ff9f11; --c2: #e98b00; --gp: 50% / calc(var(--u) * 10) calc(var(--u) * 10); height: 100vh; filter: var(--hue); background: repeating-conic-gradient( from 0deg at 11% 51.5%, #fff0 0 193deg, var(--c2) 0 282deg, var(--c1) 0 348deg, #fff0 0 360deg ) var(--gp), repeating-conic-gradient( from 0deg at 49.5% 90%, #fff0 0 101deg, var(--c1) 0 168deg, var(--c2) 0 259deg, #fff0 0 360deg ) var(--gp), repeating-conic-gradient( from -13deg at 61% 40%, var(--c1) 0 116deg, var(--c2) 0 206deg, var(--c1) 0 270deg, var(--c2) 0 360deg ) var(--gp); }
interleaved3d-hollow-cube
.interleaved3d-hollow-cube { --u: 1.5vmin; --c1: #ff882d; --c2: #d36718; --c3: #9f4e14; --c4: #76380a; --gp: 50% / calc(var(--u) * 10) calc(var(--u) * 20); --bp: calc(var(--u) * -5) calc(var(--u) * -10); height: 100vh; background: linear-gradient( 0deg, #fff0 0 calc(50% - 1px), var(--c2) 0 calc(50% + 1px), #fff0 0 100% ) var(--gp), conic-gradient(from 0deg at 0% 14.63%, var(--c2) 0 25%, #fff0 0 50%) var(--gp), conic-gradient(from 270deg at 27.27% 50%, var(--c2) 0 25%, #fff0 0 50%) var(--gp), conic-gradient(from 270deg at 63.63% 31.81%, var(--c4) 0 25%, #fff0 0 50%) var(--gp), conic-gradient( from 270deg at 100% 50%, var(--c1) 0 12.5%, var(--c3) 0 25%, #fff0 0 100% ) var(--gp), linear-gradient( 0deg, #fff0 0 calc(50% - 1px), var(--c2) 0 calc(50% + 1px), #fff0 0 100% ) var(--gp), conic-gradient(from 0deg at 0% 14.63%, var(--c2) 0 25%, #fff0 0 50%) var(--gp), conic-gradient(from 270deg at 27.27% 50%, var(--c2) 0 25%, #fff0 0 50%) var(--gp), conic-gradient(from 270deg at 63.63% 31.81%, var(--c4) 0 25%, #fff0 0 50%) var(--gp), conic-gradient( from 270deg at 100% 50%, var(--c1) 0 12.5%, var(--c3) 0 25%, #fff0 0 100% ) var(--gp); background-position: var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0, 0 0, 0 0; }
my-sponge-pattern
.my-sponge-pattern { --u: 0.552vmin; --cd: #333; --sqr: conic-gradient( from 270deg at 33.33% 33.33%, var(--cd) 0 25%, #fff0 0 100% ); --gp4: 50% / calc(var(--u) * 3) calc(var(--u) * 3); --gp3: 50% / calc(var(--u) * 9) calc(var(--u) * 9); --gp2: 50% / calc(var(--u) * 27) calc(var(--u) * 27); --gp1: 50% / calc(var(--u) * 81) calc(var(--u) * 81); height: 100vh; background: var(--sqr) var(--gp1), var(--sqr) var(--gp2), var(--sqr) var(--gp3), var(--sqr) var(--gp4); background-position: calc(var(--u) * 27) calc(var(--u) * 36.5), calc(var(--u) * 9) calc(var(--u) * 18.5), calc(var(--u) * 3) calc(var(--u) * 3.5), calc(var(--u) * 1) calc(var(--u) * 1.5); background-color: #fff; }
lit-squares-tessellated
.lit-squares-tessellated { --u: 3vmin; --l: calc(calc(var(--u) * 10) / 50); --c1: #9f2dff; --c2: #5419ca; --c3: #d76ee9; --w1: #fff; --w2: #fff8; --b: #000; --gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10); height: 100vh; background: linear-gradient(to right,var(--b) 2%, #fff0 2% 48%, var(--b) 48% 52%, #fff0 52% 98%, var(--b) 98% ) var( --gp), linear-gradient(to bottom, #fff0 0 calc(var(--l) * 23.5), var(--w1) calc(var(--l) * 24) , #fff0 calc(var(--l) * 24) calc(var(--l) * 48.5), var(--w1) calc(var(--l) * 49), #fff0 calc(var(--l) * 49) 100% ) var(--gp), linear-gradient(to bottom,var(--b) 2%, #fff0 2% 48%, var(--b) 48% 52%, #fff0 52% 98%, var(--b) 98% ) var(--gp), radial-gradient(circle at 75% 75%, var(--c3) 0 0%, #fff0 26% 100%) var(--gp), radial-gradient(circle at 75% 25%, var(--w2) 0 0%, #fff0 26% 100%) var(--gp), radial-gradient(circle at 25% 75%, var(--w2) 0 0%, #fff0 26% 100%) var(--gp), radial-gradient(circle at 25% 75%, var(--c3) 0 0%, #fff0 26% 100%) var(--gp), radial-gradient(circle at 75% 75%, var(--w2) 0 0%, #fff0 26% 100%) var(--gp), radial-gradient(circle at 25% 25%, var(--w2) 0 0%, #fff0 26% 100%) var(--gp), conic-gradient(from 0deg at 50% 50%, var(--c1) 0 20%, var(--c2) 30% 45%, var(--c1) 55% 70%, var(--c2) 80% 100%) var(--gp); }
metal-sheet-with-holes
.metal-sheet-with-holes { --u: 1.5vmin; --r1: calc(var(--u) * 4); --r2: calc(var(--u) * 4.1); --r3: calc(var(--u) / 12); --r4: calc(var(--u) / 2.5); --r5: calc(var(--u) / 2.25); --r6: calc(var(--u) / 2); --c0: #050505; --c1: #1c1c1c; --c2: #404040; --c3: #525252; --c4: #808080; --gp: 50% / calc(var(--u) * 10) calc(var(--u) * 16.8); --border-fix: var(--c0) 0 25%, #fff0 0 100%; --screw1: var(--c4) var(--r3), #fff0 var(--r4); --screw2: var(--c0), var(--c1) var(--r5), #fff0 var(--r6); --hole1: var(--c0) var(--r1), #fff0 var(--r2) 100%; --hole2: var(--c1) var(--r1), #fff0 var(--r2) 100%; --hole3: var(--c4) var(--r1), #fff0 var(--r2) 100%; height: 100vh; background: conic-gradient(from 225deg at 40% 50%, var(--border-fix)) var(--gp), conic-gradient(from 45deg at 60% 50%, var(--border-fix)) var(--gp), conic-gradient(from -45deg at 50% 24%, var(--border-fix)) var(--gp), conic-gradient(from 135deg at 50% 76%, var(--border-fix)) var(--gp), radial-gradient(circle at 99.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 84%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 83.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 84%, var(--screw2)) var(--gp), radial-gradient(circle at 99.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 100% 17%, var(--screw2)) var(--gp), radial-gradient(circle at -0.5% 16.5%, var(--screw1)) var(--gp), radial-gradient(circle at 0% 17%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 67.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 68%, var(--screw2)) var(--gp), radial-gradient(circle at 49.5% 31.5%, var(--screw1)) var(--gp), radial-gradient(circle at 50% 32%, var(--screw2)) var(--gp), radial-gradient(circle at 100% 50%, var(--hole1)) var(--gp), radial-gradient(circle at 98% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 102% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 0% 50%, var(--hole1)) var(--gp), radial-gradient(circle at -2% 48%, var(--hole2)) var(--gp), radial-gradient(circle at 2% 52%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 100%, var(--hole1)) var(--gp), radial-gradient(circle at 48% 98%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 102%, var(--hole3)) var(--gp), radial-gradient(circle at 50% 0%, var(--hole1)) var(--gp), radial-gradient(circle at 48% -2%, var(--hole2)) var(--gp), radial-gradient(circle at 52% 2%, var(--hole3)) var(--gp), linear-gradient(45deg, var(--c2) 33%, #ffffff20 55% 65%, var(--c3) 70%); background-color: var(--c2); }
shadowed-circles
.shadowed-circles { --u: 5vmin; --bg: #202020; --gray: #5e5e5e; --black3: #121212; --black4: #0009; --white1: #fffc; --white2: #fff8; --fix: var(--gray) 0 25%, #fff0 0 100%; --gp: 50%/calc(var(--u) * 5) calc(var(--u) * 10); height: 100vh; background: conic-gradient(from 225deg at 13% 10%, var(--fix)) var(--gp), conic-gradient(from 45deg at 87% 10%, var(--fix)) var(--gp), conic-gradient(from 225deg at 13% 10%, var(--fix)) var(--gp), conic-gradient(from 45deg at 87% 10%, var(--fix)) var(--gp), conic-gradient(from 225deg at 22% 52%, var(--fix)) var(--gp), conic-gradient(from 45deg at 78% 52%, var(--fix)) var(--gp), conic-gradient(from 225deg at 22% 52%, var(--fix)) var(--gp), conic-gradient(from 45deg at 78% 52%, var(--fix)) var(--gp), conic-gradient(from 225deg at 17% 82%, var(--fix)) var(--gp), conic-gradient(from 45deg at 83% 82%, var(--fix)) var(--gp), conic-gradient(from 225deg at 17% 82%, var(--fix)) var(--gp), conic-gradient(from 45deg at 83% 82%, var(--fix)) var(--gp), conic-gradient(from 315deg at 48% 2.5%, var(--fix)) var(--gp), conic-gradient(from 135deg at 48% 97.5%, var(--fix)) var(--gp), conic-gradient(from 315deg at 48% 2.5%, var(--fix)) var(--gp), conic-gradient(from 135deg at 48% 97.5%, var(--fix)) var(--gp), radial-gradient(circle at 100% 82%, var(--gray) 0 calc(var(--u) * 0.85), #fff0 calc(var(--u) * 0.9) 100%) var(--gp), radial-gradient(circle at 100% 82%, var(--white1) 0 calc(var(--u) * 0.8), #fff0 calc(var(--u) * 0.9) 100%) var(--gp), radial-gradient(circle at 100% 82%, var(--white2) 0 calc(var(--u) * 0.8), #fff0 calc(var(--u) * 0.9) 100%) var(--gp), radial-gradient(circle at 95% 82%, var(--black3) 0 calc(var(--u) * 0.85), #fff0 calc(var(--u) * 1) 100%) var(--gp), radial-gradient(circle at 90% 82%, var(--black3) 0 calc(var(--u) * 0.75), #fff0 calc(var(--u) * 1) 100%) var(--gp), radial-gradient(circle at 85% 82%, var(--black4) 0 calc(var(--u) * 0.65), #fff0 calc(var(--u) * 1) 100%) var(--gp), radial-gradient(circle at 0% 82%, var(--gray) 0 calc(var(--u) * 0.85), #fff0 calc(var(--u) * 0.9) 100%) var(--gp), radial-gradient(circle at 1% 82%, var(--white1) 0 calc(var(--u) * 0.8), #fff0 calc(var(--u) * 0.9) 100%) var(--gp), radial-gradient(circle at 100% 52%, var(--gray) 0 calc(var(--u) * 1.1), #fff0 calc(var(--u) * 1.15) 100%) var(--gp), radial-gradient(circle at 100% 52%, var(--white1) 0 calc(var(--u) * 1.05), #fff0 calc(var(--u) * 1.15) 100%) var(--gp), radial-gradient(circle at 100% 52%, var(--white2) 0 calc(var(--u) * 1.05), #fff0 calc(var(--u) * 1.15) 100%) var(--gp), radial-gradient(circle at 95% 52%, var(--black3) 0 calc(var(--u) * 1.1), #fff0 calc(var(--u) * 1.2) 100%) var(--gp), radial-gradient(circle at 90% 52%, var(--black3) 0 calc(var(--u) * 0.9), #fff0 calc(var(--u) * 1.2) 100%) var(--gp), radial-gradient(circle at 85% 52%, var(--black4) 0 calc(var(--u) * 0.7), #fff0 calc(var(--u) * 1.2) 100%) var(--gp), radial-gradient(circle at 0% 52%, var(--gray) 0 calc(var(--u) * 1.1), #fff0 calc(var(--u) * 1.15) 100%) var(--gp), radial-gradient(circle at 1% 52%, var(--white1) 0 calc(var(--u) * 1.05), #fff0 calc(var(--u) * 1.15) 100%) var(--gp), radial-gradient(circle at 100% 10%, var(--gray) 0 calc(var(--u) * 0.65), #fff0 calc(var(--u) * 0.7) 100%) var(--gp), radial-gradient(circle at 100% 10%, var(--white1) 0 calc(var(--u) * 0.6), #fff0 calc(var(--u) * 0.7) 100%) var(--gp), radial-gradient(circle at 100% 10%, var(--white2) 0 calc(var(--u) * 0.6), #fff0 calc(var(--u) * 0.7) 100%) var(--gp), radial-gradient(circle at 95% 10%, var(--black3) 0 calc(var(--u) * 0.65), #fff0 calc(var(--u) * 0.75) 100%) var(--gp), radial-gradient(circle at 90% 10%, var(--black3) 0 calc(var(--u) * 0.65), #fff0 calc(var(--u) * 0.75) 100%) var(--gp), radial-gradient(circle at 85% 10%, var(--black4) 0 calc(var(--u) * 0.45), #fff0 calc(var(--u) * 0.75) 100%) var(--gp), radial-gradient(circle at 0% 10%, var(--gray) 0 calc(var(--u) * 0.65), #fff0 calc(var(--u) * 0.7) 100%) var(--gp), radial-gradient(circle at 1% 10%, var(--white1) 0 calc(var(--u) * 0.6), #fff0 calc(var(--u) * 0.7) 100%) var(--gp), radial-gradient(circle at 48% 100%, var(--gray) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.3) 100%) var(--gp), radial-gradient(circle at 49% 100%, var(--white1) 0 calc(var(--u) * 0.2), #fff0 calc(var(--u) * 0.3) 100%) var(--gp), radial-gradient(circle at 47% 100%, var(--white2) 0 calc(var(--u) * 0.2), #fff0 calc(var(--u) * 0.3) 100%) var(--gp), radial-gradient(circle at 43% 100%, var(--black3) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.35) 100%) var(--gp), radial-gradient(circle at 39% 100%, var(--black3) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.35) 100%) var(--gp), radial-gradient(circle at 35% 100%, var(--black4) 0 calc(var(--u) * 0.1), #fff0 calc(var(--u) * 0.35) 100%) var(--gp), radial-gradient(circle at 48% 0%, var(--gray) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.3) 100%) var(--gp), radial-gradient(circle at 49% 0%, var(--white1) 0 calc(var(--u) * 0.2), #fff0 calc(var(--u) * 0.3) 100%) var(--gp), radial-gradient(circle at 47% 0%, var(--white2) 0 calc(var(--u) * 0.2), #fff0 calc(var(--u) * 0.3) 100%) var(--gp), radial-gradient(circle at 43% 0%, var(--black3) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.35) 100%) var(--gp), radial-gradient(circle at 39% 0%, var(--black3) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.35) 100%) var(--gp), radial-gradient(circle at 35% 0%, var(--black4) 0 calc(var(--u) * 0.1), #fff0 calc(var(--u) * 0.35) 100%) var(--gp), radial-gradient(circle at 53% 28%, var(--gray) 0 calc(var(--u) * 1), #fff0 calc(var(--u) * 1.05) 100%) var(--gp), radial-gradient(circle at 54% 28%, var(--white1) 0 calc(var(--u) * 0.95), #fff0 calc(var(--u) * 1.05) 100%) var(--gp), radial-gradient(circle at 52% 28%, var(--white2) 0 calc(var(--u) * 0.95), #fff0 calc(var(--u) * 1.05) 100%) var(--gp), radial-gradient(circle at 47% 28%, var(--black3) 0 calc(var(--u) * 1), #fff0 calc(var(--u) * 1.05) 100%) var(--gp), radial-gradient(circle at 42% 28%, var(--black3) 0 calc(var(--u) * 1), #fff0 calc(var(--u) * 1.05) 100%) var(--gp), radial-gradient(circle at 37% 28%, var(--black4) 0 calc(var(--u) * 0.75), #fff0 calc(var(--u) * 1.05) 100%) var(--gp), radial-gradient(circle at 48% 68%, var(--gray) 0 calc(var(--u) * 0.5), #fff0 calc(var(--u) * 0.55) 100%) var(--gp), radial-gradient(circle at 49% 68%, var(--white1) 0 calc(var(--u) * 0.45), #fff0 calc(var(--u) * 0.55) 100%) var(--gp), radial-gradient(circle at 47% 68%, var(--white2) 0 calc(var(--u) * 0.45), #fff0 calc(var(--u) * 0.55) 100%) var(--gp), radial-gradient(circle at 42% 68%, var(--black3) 0 calc(var(--u) * 0.5), #fff0 calc(var(--u) * 0.55) 100%) var(--gp), radial-gradient(circle at 36% 68%, var(--black3) 0 calc(var(--u) * 0.45), #fff0 calc(var(--u) * 0.55) 100%) var(--gp), radial-gradient(circle at 32% 68%, var(--black4) 0 calc(var(--u) * 0.25), #fff0 calc(var(--u) * 0.55) 100%) var(--gp), var(--bg); }
wooden-basket
.wooden-basket { --u: 8vmin; --c1: #ffa726; --c2: #e59319; --c3: #f1a12c; --c4: #cf8b26; --sh: #0006; --sh2: #0002; --gp: 50%/ calc(var(--u) * 2) calc(var(--u) * 2); height: 100vh; background: conic-gradient(from -10deg at 60% 0%, #fff0 0 25%, var(--sh2) 28%, #fff0 31% 100%) var(--gp), conic-gradient(from -5deg at 0% calc(60% - 1px), #fff0 0, var(--sh) 0%, #fff0 4% 100%) var(--gp), conic-gradient(from 0deg at 60% calc(60% - 1px), #fff0 0 22%, var(--sh2) 25%, #fff0 25% 100%) var(--gp), conic-gradient(from 0deg at 60% calc(60% - 1px), var(--c4) 0 25%, #fff0 0 97.5%, var(--sh) 102%) var(--gp), linear-gradient(180deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 101%) var(--gp), linear-gradient(180deg, #fff0 10%, var(--c3) 10% 50%, #fff0 50% 100%) var(--gp), linear-gradient(90deg, #fff0 0%, var(--sh) 10%, #fff0 10% 50%, var(--sh) 50%, #fff0 60% 100%) var(--gp), linear-gradient(90deg, #fff0 10%, var(--c2) 10% 50%, #fff0 50% 100%) var(--gp), linear-gradient(180deg, #fff0 60%, var(--c1) 60% 100%) var(--gp), #6a1c00; }
puzzle-pieces
.puzzle-pieces { --u: 2.5vmin; --c1: #009688; --c2: #d8db24; --pz: calc(var(--u) * 0.65), #fff0 calc(calc(var(--u) * 0.65) + 1px); --gp: 50%/ calc(var(--u) * 10) calc(var(--u) * 10); height: 100vh; background: radial-gradient(circle at 55% 25%, var(--c2) var(--pz)) var(--gp), radial-gradient(circle at 75% 45%, var(--c2) var(--pz)) var(--gp), radial-gradient(circle at 5% 75%, var(--c2) var(--pz)) var(--gp), radial-gradient(circle at 25% 55%, var(--c2) var(--pz)) var(--gp), radial-gradient(circle at 55% 75%, var(--c1) var(--pz)) var(--gp), radial-gradient(circle at 75% 95%, var(--c1) var(--pz)) var(--gp), radial-gradient(circle at 5% 25%, var(--c1) var(--pz)) var(--gp), radial-gradient(circle at 25% 5%, var(--c1) var(--pz)) var(--gp), conic-gradient(from 0deg at 50% 50%, var(--c1) 0 25%, var(--c2) 0 50%, var(--c1) 0 75%, var(--c2) 0 100%) var(--gp); }
pumpkins-tessellated
.pumpkins-tessellated { --u: 14px; --c1: #f08f4a; --c2: #ef7220; --c3: #eb650c; --c4: #cf5708; --c5: #77b666; --c6: #3fa030; --c7: #0a2624; --c7: #482c4c; --gp: 50%/ calc(var(--u) * 10) calc(var(--u) * 13); --bp: calc(var(--u) * -5) calc(var(--u) * -6.5); --bg: radial-gradient(circle at 52% 3%, var(--c5) 2.75%, #fff0 calc(2.75% + 1px)) var(--gp), radial-gradient(ellipse at 51% 36.5%, var(--c2) 22%, #fff0 calc(22% + 1px)) var(--gp), radial-gradient(ellipse at 49% 36.5%, var(--c2) 22%, #fff0 calc(22% + 1px)) var(--gp), radial-gradient(ellipse at 50% 35%, var(--c1) 25%, #fff0 calc(25% + 1px)) var(--gp), radial-gradient(ellipse at 60% 36.5%, var(--c3) 22%, #fff0 calc(22% + 1px)) var(--gp), radial-gradient(ellipse at 59% 35%, var(--c1) 25%, #fff0 calc(25% + 1px)) var(--gp), radial-gradient(ellipse at 40% 36.5%, var(--c3) 22%, #fff0 calc(22% + 1px)) var(--gp), radial-gradient(ellipse at 41% 35%, var(--c1) 25%, #fff0 calc(25% + 1px)) var(--gp), radial-gradient(ellipse at 69% 36.5%, var(--c4) 22%, #fff0 calc(22% + 1px)) var(--gp), radial-gradient(ellipse at 68% 35%, var(--c1) 25%, #fff0 calc(25% + 1px)) var(--gp), radial-gradient(ellipse at 32% 36.5%, var(--c4) 22%, #fff0 calc(22% + 1px)) var(--gp), radial-gradient(ellipse at 33% 35%, var(--c1) 25%, #fff0 calc(25% + 1px)) var(--gp), conic-gradient(from -60deg at 51.5% 4%, #fff0 0 5deg, var(--c7) 10deg 125deg, #fff0 130deg 360deg) var(--gp), conic-gradient(from 5deg at 44% 33%, #fff0 0 0.5deg, var(--c5) 1.25deg 6deg, var(--c6) 6.5deg 12deg, #fff0 12.75deg 360deg) var(--gp); background: var(--bg), var(--bg); background-color: var(--c7); background-position: var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), var(--bp), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; height: 100vh; }
wvy-rect-lines
.wvy-rect-lines { --sz: 16px; --b1: #f7ad39; --b2: #CF9130; --b3: #9f6f26; --r1: #3a85fb; --r2: #306ECF; --r3: #1b417c; --ln: #1b417c80; --ts: 50%/ calc(var(--sz) * 10) calc(var(--sz) * 5); margin: 0; padding: 0; height: 100vh; overflow: hidden; background: linear-gradient(90deg, #fff0 0 25%, var(--ln) 0 calc(25% + 1px), #fff0 0 50%, var(--ln) 0 calc(50% + 1px), #fff0 0 75%, var(--ln) 0 calc(75% + 1px), #fff0 0 calc(100% - 1px), var(--ln) 0 100%) var(--ts), conic-gradient(from 180deg at 25% 50%, var(--r2) 0 90deg, var(--b2) 0 180deg, #fff0 0 100%) var(--ts), conic-gradient(from 180deg at 50% 50%, var(--b3) 0 45deg, #fff0 0 100%) var(--ts), conic-gradient(from 180deg at 50% 0, var(--r3) 0 45deg, var(--b3) 0 90deg, #fff0 0 100%) var(--ts), conic-gradient(from 135deg at 75% 50%, var(--b1) 0 45deg, #fff0 0 100%) var(--ts), conic-gradient(from 90deg at 75% 0, var(--b1) 0 45deg, var(--r1) 0 90deg, #fff0 0 100%) var(--ts), linear-gradient(180deg, var(--r2) 0 50%, var(--b2) 0 100% ) var(--ts); }
honeycomb-tessellated
.honeycomb-tessellated { --sz: 10px; --ln: 8px; --c1: #ffb564; --c2: #ff5903; --c3: #ffa063; --ts: 50%/ calc(var(--sz) * 11.8) calc(var(--sz) * 20); margin: 0; padding: 0; height: 100vh; overflow: hidden; background: radial-gradient(circle at 60% 110%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), radial-gradient(circle at 60% 10%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), radial-gradient(circle at 110% 60%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), radial-gradient(circle at 10% 60%, var(--c3) calc(var(--sz) * -3), #fff0 calc(var(--sz) * 5)) var(--ts), conic-gradient(from 120deg at 50% calc(82.75% + calc(var(--ln) / 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 120deg at 50% calc(82.75% + calc(var(--ln) / 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 120deg at 50% calc(82.5% - calc(var(--ln) * 1.5)), var(--c1) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 120deg at 50% calc(82.5% - calc(var(--ln) * 1.5)), var(--c1) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 60deg at calc(50% + var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 60deg at calc(50% + var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 180deg at calc(50% - var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 180deg at calc(50% - var(--ln)) 50.5%, var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from 0deg at calc(100% - var(--ln)) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), conic-gradient(from 0deg at calc(100% - var(--ln)) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), conic-gradient(from -90deg at var(--ln) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), conic-gradient(from -90deg at var(--ln) 37.75%, var(--c1) 0 90deg, #fff0 0 100%) var(--ts), conic-gradient(from -60deg at 50% calc(50% - calc(var(--ln) * 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), conic-gradient(from -60deg at 50% calc(50% - calc(var(--ln) * 1.5)), var(--c2) 0 120deg, #fff0 0 100%) var(--ts), var(--c1); }
leather-sofa-tessellated
.leather-sofa-tessellated { --sz: 10px; --cd: 20deg; --c1: hsl(var(--cd) 81% 33%); --c2: hsl(var(--cd) 97% 25%); --c3: hsl(var(--cd) 100% 18%); --c4: hsl(var(--cd) 100% 13%); --ts: 50%/ calc(var(--sz) * 18) calc(var(--sz) * 18); --cg: var(--c1) 22.5deg, var(--c2) 45deg, var(--c3) 67.5deg, var(--c4) 90deg, #fff0 0 100%; --hd: conic-gradient(from -45deg at 50% 50%, var(--cg)) var(--ts); --bt: var(--c2) calc(var(--sz) * 0.5), var(--c3) calc(var(--sz) * 0.6) calc(var(--sz) * 0.65), var(--c4) calc(calc(var(--sz) * 0.65) + 1px) calc(var(--sz) * 0.75), #0002 calc(var(--sz) * 0.85) calc(var(--sz) * 1), #fff0 calc(var(--sz) * 8.5) 100%; --bts: #f7b2b244 calc(var(--sz) * 0.05), #fff0 calc(var(--sz) * 0.65) 100%; margin: 0; padding: 0; height: 100vh; overflow: hidden; background: radial-gradient(circle at 49.25% 50.5%, var(--bts)) var(--ts), radial-gradient(circle at 99.25% 0.5%, var(--bts)) var(--ts), radial-gradient(circle at 99.25% 100.5%, var(--bts)) var(--ts), radial-gradient(circle at -0.75% 0.5%, var(--bts)) var(--ts), radial-gradient(circle at -0.75% 100.5%, var(--bts)) var(--ts), radial-gradient(circle at 50% 50%, var(--bt)) var(--ts), radial-gradient(circle at 100% 100%, var(--bt)) var(--ts), radial-gradient(circle at 100% 0%, var(--bt)) var(--ts), radial-gradient(circle at 0% 100%, var(--bt)) var(--ts), radial-gradient(circle at 0% 0%, var(--bt)) var(--ts), linear-gradient(45deg, #fff0 49%, var(--c1), var(--c2), var(--c3), #fff0 51%) var(--ts), linear-gradient(135deg, #fff0 49%, var(--c1), var(--c2), var(--c3), #fff0 51%) var(--ts), var(--hd), var(--hd), var(--hd), var(--hd), conic-gradient(from -45deg at 100% 100%, var(--cg)) var(--ts), conic-gradient(from -45deg at 0% 100%, var(--cg)) var(--ts), conic-gradient(from -45deg at 50% 150%, var(--cg)) var(--ts); }
ColorStops
.ColorStops { background: linear-gradient( 43deg, oklch(80% 0.2 10) 20%, oklch(100% 0 0) 20% 22%, oklch(80% 0.2 40) 22% 42%, oklch(100% 0 0) 42% 44%, oklch(80% 0.2 60) 44% 66%, oklch(100% 0 0) 66% 68%, oklch(80% 0.2 80) 68% 88%, oklch(100% 0 0) 88% 90%, oklch(80% 0.2 99) 90% ); background-position: center; background-attachment: fixed; }
Previous
Next
