Scribd
Upload
13 views7 pages

Patterns CSS

The document contains CSS code defining patterns and gradients for HTML backgrounds. It uses variables to control size and colors, then layers multiple gradients like conic, radial, and linear gradients to create complex patterned backgrounds. Each section redefines the variables to generate a new pattern at a defined size.

Uploaded by

musharraf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views7 pages

Patterns CSS

The document contains CSS code defining patterns and gradients for HTML backgrounds. It uses variables to control size and colors, then layers multiple gradients like conic, radial, and linear gradients to create complex patterned backgrounds. Each section redefines the variables to generate a new pattern at a defined size.

Uploaded by

musharraf
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Patterns CSS

html {
--s: 82px; /* control the size */
--c1: #b2b2b2;
--c2: #ffffff;
--c3: #d9d9d9;

--_g: var(--c3) 0 120deg,#0000 0;


background:
conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
conic-gradient(from 60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%,
var(--c1) 0 calc(500%/6),var(--c2) 0);
background-size: calc(1.732*var(--s)) var(--s);
}

html {
--s: 30px; /* control the size */

--_c: #5E9FA3;
background:
conic-gradient(at 50% calc(100%/6),var(--_c) 60deg,#0000 0),
conic-gradient(at calc(100%/6) 50%,#0000 240deg,var(--_c) 0),
conic-gradient(from 180deg at calc(100%/6) calc(500%/6),var(--_c) 60deg,#0000 0),
conic-gradient(from 180deg at calc(500%/6),#0000 240deg,var(--_c) 0) calc(4*.866*var(--
s)) 0,
repeating-linear-gradient(-150deg,#B05574 0 calc(100%/6),#0000 0 50%),
repeating-linear-gradient(-30deg, #B39C82 0 calc(100%/6),#DCD1B4 0 50%);
background-size: calc(6*.866*var(--s)) calc(3*var(--s))
}

html {
--s: 6px; /* control the size */

--g:#0000 66%,#3B2D38 68% 98%,#0000;


background:
radial-gradient(30% 30% at 0% 30%,var(--g))
var(--s) calc(9*var(--s)),
radial-gradient(30% 30% at 100% 30%,var(--g))
var(--s) calc(-1*var(--s)),
radial-gradient(30% 30% at 30% 100%,var(--g))
calc(10*var(--s)) 0,
radial-gradient(30% 30% at 30% 0% ,var(--g))
#F02475;
background-size: calc(20*var(--s)) calc(20*var(--s));
}

html {
--s: 37px; /* control the size */

--c:#0000,#2FB8AC .5deg 119.5deg,#0000 120deg;


--g1:conic-gradient(from 60deg at 56.25% calc(425%/6),var(--c));
--g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
--g3:conic-gradient(from -60deg at 50% calc(175%/12),var(--c));
background:
var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s))
#ECBE13;
background-size: calc(2*var(--s)) calc(3.46*var(--s));
}

html {
--s: 160px; /* control the size */
--c1: #A14016;
--c2: #CFC89A;

--_g: var(--s) var(--s)


radial-gradient(var(--c1) 17%,var(--c2) 18% 35%,#0000 36.5%);
background:
calc(var(--s)/-4) calc(var(--s)/-4)/var(--_g),
calc(var(--s)/ 4) calc(var(--s)/ 4)/var(--_g),
radial-gradient(var(--c2) 34%,var(--c1) 36% 68%,#0000 70%)
0 0/calc(var(--s)/2) calc(var(--s)/2),
repeating-linear-gradient(45deg,var(--c1) -12.5% 12.5%,var(--c2) 0 37.5%)
0 0/var(--s) var(--s);
}

html {
--s: 124px; /* control the size */
--g: #90c0b2 0 25%,#f9fbef 0 50%,#0000 0;
background:
conic-gradient(from 135deg at 25% 75%,var(--g))
calc(var(--s)/4) calc(var(--s)/-4),
conic-gradient(from -45deg at 75% 25%,var(--g))
calc(var(--s)/-4) calc(var(--s)/4),
repeating-conic-gradient(var(--g));
background-size: var(--s) var(--s)
}

Good One****

html {
--s: 84px; /* control the size */

--c: #fff;
--a:from -30deg at;
background:
linear-gradient(#0000 50%,#0004 0),
conic-gradient(var(--a) 90%,var(--c) 240deg,#0000 0),
conic-gradient(var(--a) 75%,#71e9a0 240deg,#0000 0),
conic-gradient(var(--a) 25%,#0000 240deg,var(--c) 0),
conic-gradient(var(--a) 40%,var(--c) 240deg,#2a6a9b 0);
background-size: calc(1.5*var(--s)) var(--s);
}

html {
--s: 50px; /* control the size */
--c1: #D9CEB2;
--c2: #948C75;

--_g: calc(2*var(--s)) calc(2*var(--s))


radial-gradient(25% 25%,var(--c1) 99%,#0000 101%);
background:
0 var(--s)/var(--_g),var(--s) 0/var(--_g),
radial-gradient(50% 50%,var(--c2) 97%,#0000)
calc(var(--s)/2) calc(var(--s)/2)/var(--s) var(--s),
linear-gradient(90deg,var(--c1) 50%,var(--c2) 0)
0 0/calc(2*var(--s));
}

html {
background:
repeating-conic-gradient(#F2E9E1 0 45deg,#99B2B7 0 90deg)
0 0/100px 100px;
}

html {
--s: 100px; /* control the size */
--c1: #FDF1CC;
--c2: #987F69;

--g: var(--c1) 3.125%,var(--c2) 0 9.375%,


var(--c1) 0 15.625%,var(--c2) 0 21.875%,
var(--c1) 0 28.125%,#0000 0;
background:
linear-gradient(225deg,#0000 3.125%,var(--c2) 0 9.375%,
#0000 0 78.125%,var(--c2) 0 84.375%,#0000 0)
0 calc(var(--s)/2),
linear-gradient( 45deg,var(--g)) 0 var(--s),
linear-gradient( 45deg,var(--g)) calc(var(--s)/-2) calc(var(--s)/-2),
linear-gradient(225deg,var(--g)) var(--s) 0,
linear-gradient(225deg,var(--g)) calc(var(--s)/2) var(--s),
repeating-linear-gradient(-45deg,var(--c1) -3.125% 3.125%,var(--c2) 0 9.375%);
background-size: calc(2*var(--s)) calc(2*var(--s));
}

html {
--s: 100px; /* control the size */
--c1: #E1F5C4;
--c2: #3B8183;

--_g:#0000, #0004 5%,


var(--c2) 6% 14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,
var(--c2) 86% 94%,#0004 95%,#0000;
background:
radial-gradient(100% 50% at 100% 0 ,var(--_g)),
radial-gradient(100% 50% at 0 50% ,var(--_g)),
radial-gradient(100% 50% at 100% 100%,var(--_g));
background-size: var(--s) calc(2*var(--s));
}
html {
--s: 80px; /* control the size */
--c: #542437;

--_g:
#0000 calc(-650%/13) calc(50%/13),var(--c) 0 calc(100%/13),
#0000 0 calc(150%/13),var(--c) 0 calc(200%/13),
#0000 0 calc(250%/13),var(--c) 0 calc(300%/13);
--_g0: repeating-linear-gradient( 45deg,var(--_g));
--_g1: repeating-linear-gradient(-45deg,var(--_g));
background:
var(--_g0),var(--_g0) var(--s) var(--s),
var(--_g1),var(--_g1) var(--s) var(--s) #C02942;
background-size: calc(2*var(--s)) calc(2*var(--s));
}

html {
--s: 100px; /* control the size */
--c1: #F8B195;
--c2: #355C7D;

--_g:
var(--c2) 6% 14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86%
94%;
background:
radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
var(--c1);
background-size: var(--s) var(--s);
}

html {
--s: 140px; /* control the size */
--c1: #AB3E5B;
--c2: #FFBE40;

--_g:
#0000 25%,#0008 47%,var(--c1) 53% 147%,var(--c2) 153% 247%,
var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
--_s: calc(25%/3) calc(25%/4) at 50%;
background:
radial-gradient(var(--_s) 100%,var(--_g)),
radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
radial-gradient(var(--_s) 0 ,var(--_g)) calc(var(--s)/2) 0,
radial-gradient(var(--_s) 0 ,var(--_g)) 0 calc(3*var(--s)/4),
repeating-linear-gradient(90deg,#ACCEC0 calc(25%/-6) calc(25%/6),#61A6AB 0
calc(25%/2));
background-size: var(--s) calc(3*var(--s)/2)
}

html {
--s: 200px; /* control the size */

--_g: #dc9d37 25%,#fed450 0 50%,#0000 0;


--_l1: #fff 0 1px,#0000 0 calc(25% - 1px),#fff 0 25%;
--_l2: #fff 0 1px,#0000 0 calc(50% - 1px),#fff 0 50%;
background:
repeating-linear-gradient( 45deg,var(--_l1)),
repeating-linear-gradient(-45deg,var(--_l1)),
repeating-linear-gradient( 0deg,var(--_l2)),
repeating-linear-gradient( 90deg,var(--_l2)),
conic-gradient(from 135deg at 25% 75%,var(--_g)),
conic-gradient(from 225deg at 25% 25%,var(--_g)),
conic-gradient(from 45deg at 75% 75%,var(--_g)),
conic-gradient(from -45deg at 75% 25%,var(--_g)),
repeating-conic-gradient(#125c65 0 45deg,#bc4a33 0 90deg);
background-size: var(--s) var(--s);
}

html {
--s: 82px; /* control the size */
--c1: #b2b2b2;
--c2: #ffffff;
--c3: #d9d9d9;

--_g: var(--c3) 0 120deg,#0000 0;


background:
conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
conic-gradient(from 60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%,
var(--c1) 0 calc(500%/6),var(--c2) 0);
background-size: calc(1.732*var(--s)) var(--s);
}

html {
--s: 84px; /* control the size*/
--c1: #f2f2f2;
--c2: #cdcbcc;
--c3: #999999;

--_g: 0 120deg,#0000 0;
background:
conic-gradient(from 0deg at calc(500%/6) calc(100%/3),var(--c3) var(--_g)),
conic-gradient(from -120deg at calc(100%/6) calc(100%/3),var(--c2) var(--_g)),
conic-gradient(from 120deg at calc(100%/3) calc(500%/6),var(--c1) var(--_g)),
conic-gradient(from 120deg at calc(200%/3) calc(500%/6),var(--c1) var(--_g)),
conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2) 60deg,var(--c1) var(--_g)),
conic-gradient(from 60deg at calc(200%/3) 50%,var(--c1) 60deg,var(--c3) var(--_g)),
conic-gradient(from -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0
240deg,var(--c3) 0);
background-size: calc(var(--s)*1.732) var(--s);
/* sqrt(3) = 1.732 */
}

You might also like