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

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(140deg, #93a5cf, #e4efe9, #92fe9d)}
.gradient22 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff)}
.gradient23 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96)}
.gradient24 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3)}
.gradient25{background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8)}
.gradient26 {background:linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8 ,#c71d6f)}
.gradient27 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8 ,#c71d6f ,#a8caba)}
.gradient28 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8 ,#c71d6f ,#a8caba ,#16a085)}

Sample5

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
.gradient29 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 20%,#e8198b 100%)}
.gradient30 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 30%,#e8198b 100%)}
.gradient31 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 40%,#e8198b 100%)}
.gradient32 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 50%,#e8198b 100%)}
.gradient33{background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 60%,#e8198b 100%)}
.gradient34 {background:linear-gradient(-225deg, #d299c2 0%, #fef9d7 70%,#e8198b 100%)}
.gradient35 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 80%,#e8198b 100%)}
.gradient36 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 90%,#e8198b 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%);}

See the Pen SVG linear gradient: angle in degrees by Nikita Vasilyev (@NV) on CodePen.

See the Pen Color Blend Loader Animation (LESS Version) by Ryan (@rydaly) on CodePen.

See the Pen repeating-linear-gradient background-image by Atticus Koya (@k-ya) on CodePen.

See the Pen SCSS Linear and Radial Gradients by MrPirrera (@pirrera) on CodePen.

See the Pen Trippy Radial Gradients by Ben Briggs (@ben-eb) on CodePen.