BACKGROUND

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: linear-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, #a18cd1, #fbc2eb)}
.gradient6 {background: -webkit-linear-gradient(left, #a18cd1, #fbc2eb)}
.gradient7 {background: -webkit-linear-gradient(right, #a18cd1, #fbc2eb)}
.gradient8 {background: -webkit-linear-gradient(bottom, #a18cd1, #fbc2eb)}        

Sample3

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

Sample4

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

Sample5

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21 {background: linear-gradient(0deg, #16a085, #f4d03f)}
.gradient22 {background: linear-gradient(20deg, #16a085, #f4d03f, #874da2)}
.gradient23 {background: linear-gradient(40deg, #16a085, #f4d03f, #874da2, #c7eafd)}
.gradient24 {background: linear-gradient(60deg, #16a085, #f4d03f, #874da2, #c7eafd, #04befe, #00e3ae)}
.gradient25 {background: linear-gradient(80deg, #16a085, #f4d03f, #874da2, #c7eafd, #04befe, #00e3ae, #517fa4)}
.gradient26 {background: linear-gradient(100deg, #16a085, #f4d03f, #874da2, #c7eafd, #04befe, #00e3ae, #517fa4, #ff9a44)}
.gradient27 {background: linear-gradient(120deg, #16a085, #f4d03f, #874da2, #c7eafd, #04befe, #00e3ae, #517fa4, #ff9a44, #ffffff)}
.gradient28 {background: linear-gradient(140deg, #16a085, #f4d03f, #874da2, #c7eafd, #04befe, #00e3ae, #517fa4, #ff9a44, #ffffff, #50cc7f)}  

Sample6

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
.gradient29 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 20%, #f794a4 100%);}
.gradient30 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 30%, #f794a4 100%);}
.gradient31 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 40%, #f794a4 100%);}
.gradient32 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 50%, #f794a4 100%);}
.gradient33 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 60%, #f794a4 100%);}
.gradient34 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 70%, #f794a4 100%);}
.gradient35 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 80%, #f794a4 100%);}
.gradient36 {background: linear-gradient(-255deg, #64b3f4 0%, #c2e59c 90%, #f794a4 100%);}

Sample7

gradient37
gradient38
gradient39
gradient40
gradient41
gradient34
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);}

Sample8

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%);}

Sample9

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 The glow ribbon by Manabjyoti Sarma (@manab_27) on CodePen.

See the Pen Canvas Sparkle Light Trail by Jack Rugile (@jackrugile) on CodePen.

See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.

See the Pen In Rainbows by Dan Wilson (@danwilson) on CodePen.

See the Pen A Portal to Tomorrow by Jase (@jasesmith) on CodePen.