Portfolio

Property Sample Description
background background: #000 url("background.gif") no-repeat top center; 배경 단축형
background-image background-image:url("경로"); 배경 이미지를 설정합니다.
background-repeat background-repeat:no-repeat; 배경 반복여부를 설정합니다.
background-attachment background-attachment:fixed; 배경 부착 방식
background-color background-color:#fff; 배경색
background-position background-position:top; 배경 위치
background-origin background-origin:content-box; 배경 중심 위치
background-size background-size:cover; 배경 사이즈
background-clip background-clip:content-box; 배경 적용범위

Background Gradient

background: linear-gradient(direction, color1, color2, color3,....)

Valut Sample Description
linear-gradient background:linear-gradient(); 선형 그라데이션 백그라운드를 설정합니다.
radial-gradient background:radial-gradient(); 원형 그라데이션 백그라운드를 설정합니다.

Sample1

gradient1
gradient2
gradient3
gradient4
.gradient1 {background: linear-gradient(to top, #a18cd1, #fbc2eb)}
.gradient2 {background: linear-gradient(to left, #a18cd1, #fbc2eb)}
.gradient3 {background: linear-gradient(to right, #a18cd1, #fbc2eb)}
.gradient4 {background: linear-gradient(to bottom, #a18cd1, #fbc2eb)}         

Sample2

gradient5
gradient6
gradient7
gradient8
.gradient5 {background: -webkit-linear-gradient(top, #ff9a9e, #fad0c4)}
.gradient6 {background: -webkit-linear-gradient(left, #ff9a9e, #fad0c4)}
.gradient7 {background: -webkit-linear-gradient(right, #ff9a9e, #fad0c4)}
.gradient8 {background: -webkit-linear-gradient(bottom, #ff9a9e, #fad0c4)}       

Sample3

gradient9
gradient10
gradient11
gradient12
.gradient9 {background: -webkit-linear-gradient(left top, #a8edea, #fed6e3)}
.gradient10 {background: -webkit-linear-gradient(right top, #a8edea, #fed6e3)}
.gradient11 {background: -webkit-linear-gradient(left bottom, #a8edea, #fed6e3)}
.gradient12 {background: -webkit-linear-gradient(right bottom, #a8edea, #fed6e3)}

Sample4

gradient13
gradient14
gradient15
gradient16
gradient17
gradient18
gradient19
gradient20
 .gradient13 {background: linear-gradient(0deg, #d299c2, #fef9d7)}
.gradient14 {background: linear-gradient(20deg, #d299c2, #fef9d7)}
.gradient15 {background: linear-gradient(40deg, #d299c2, #fef9d7)}
.gradient16 {background: linear-gradient(60deg, #d299c2, #fef9d7)}
.gradient17 {background: linear-gradient(80deg, #d299c2, #fef9d7)}
.gradient18 {background: linear-gradient(100deg, #d299c2, #fef9d7)}
.gradient19 {background: linear-gradient(120deg, #d299c2, #fef9d7)}
.gradient20 {background: linear-gradient(140deg, #d299c2, #fef9d7)}

Sample5

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21 {background: linear-gradient(40deg, #d4fc79, #96e6a1)}
.gradient22 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4)}
.gradient23 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4, #84fab0)}
.gradient24 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4, #84fab0, #30cfd0)}
.gradient25 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4, #84fab0, #30cfd0, #89f7fe)}
.gradient26 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4, #84fab0, #30cfd0, #89f7fe, #fddb92, #96fbc4)}
.gradient27 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4, #84fab0, #30cfd0, #89f7fe, #fddb92, #96fbc4, #c471f5)}
.gradient28 {background: linear-gradient(40deg, #d4fc79, #96e6a1, #8fd3f4, #84fab0, #30cfd0, #89f7fe, #fddb92, #96fbc4, #c471f5, #f5efef)}

Sample6

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
 .gradient29 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 20%, #fbc8d4 100%)}
.gradient30 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 30%, #fbc8d4 100%)}
.gradient31 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 40%, #fbc8d4 100%)}
.gradient32 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 50%, #fbc8d4 100%)}
.gradient33 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 60%, #fbc8d4 100%)}
.gradient34 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 70%, #fbc8d4 100%)}
.gradient35 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 80%, #fbc8d4 100%)}
.gradient36 {background: linear-gradient(-225deg, #e9defa 0%, #fbfcdb 90%, #fbc8d4 100%)}

Sample6

gradient37
gradient38
gradient39
gradient40
gradient41
gradient42
gradient43
gradient44
 .gradient37 {background: radial-gradient(red, yellow);}
.gradient38 {background: radial-gradient(red, yellow, blue);}
.gradient39 {background: radial-gradient(red, yellow, blue, green);}
.gradient40 {background: radial-gradient(red, yellow, blue, green, aqua);}
.gradient41 {background: radial-gradient(red, yellow 20%, blue, green, aqua );}
.gradient42 {background: radial-gradient(red, yellow 30%, blue, green, aqua );}
.gradient43 {background: radial-gradient(red, yellow 40%, blue, green, aqua );}
.gradient44 {background: radial-gradient(red, yellow 50%, blue, green, aqua );}

Sample7

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.gradient45 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}             
.gradient46 {background: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient47 {background: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%);}
.gradient48 {background: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);}
.gradient49 {background: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
.gradient50 {background: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b4e 100%);}
.gradient51 {background: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%);}
.gradient52 {background: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

Sample8

gradient53
gradient54
gradient55
gradient56
gradient57
gradient58
gradient59
gradient60
.gradient53 {background: linear-gradient(0deg, #231557 50%, #FFF800 50%);}
.gradient54 {background: linear-gradient(20deg, #231557 50%, #FFF800 50%);}
.gradient55 {background: linear-gradient(45deg, #231557 50%, #FFF800 50%);}
.gradient56 {background: linear-gradient(60deg, #231557 50%, #FFF800 50%);}
.gradient57 {background: linear-gradient(80deg, #231557 50%, #FFF800 50%);}
.gradient58 {background: linear-gradient(120deg, #231557 50%, #FFF800 50%);}
.gradient59 {background: linear-gradient(150deg, #231557 50%, #FFF800 50%);}
.gradient60 {background: linear-gradient(180deg, #231557 50%, #FFF800 50%);}

codepen

See the Pen linear-gradient playground by Mike White (@myquite) on CodePen.

See the Pen linear-gradient by Ray Thomas II (@RayThomas1GTU) on CodePen.

See the Pen Linear Gradient Background Generator by Chris M (@Lymelight) on CodePen.

See the Pen Linear gradient experiment by Norbert (@Lichwa) on CodePen.

See the Pen Gradient [deg] by Andreas Storm (@andreasstorm) on CodePen.

See the Pen Gradient Animation by Michael McMillan (@MikeMcChillin) on CodePen.