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

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, #5ee7df, #b490ca)}
.gradient14 {background: linear-gradient(20deg, #5ee7df, #b490ca)}
.gradient15 {background: linear-gradient(40deg, #5ee7df, #b490ca)}
.gradient16 {background: linear-gradient(60deg, #5ee7df, #b490ca)}
.gradient17 {background: linear-gradient(80deg, #5ee7df, #b490ca)}
.gradient18 {background: linear-gradient(100deg, #5ee7df, #b490ca)}
.gradient19 {background: linear-gradient(120deg, #5ee7df, #b490ca)}
.gradient20 {background: linear-gradient(140deg, #5ee7df, #b490ca)}      

sample5

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
            
.gradient21 {background: linear-gradient(140deg, #a8edea, #fed6e3)}
.gradient22 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc)}
.gradient23 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc, #f093fb)}
.gradient24 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc, #f093fb, #5ee7df)}
.gradient25 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc, #f093fb, #5ee7df, #d299c2)}
.gradient26 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc, #f093fb, #5ee7df, #d299c2,#fddb92)}
.gradient27 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc, #f093fb, #5ee7df, #d299c2,#fddb92, #d1fdff)}
.gradient28 {background: linear-gradient(140deg, #a8edea, #fed6e3, #e0c3fc, #f093fb, #5ee7df, #d299c2,#fddb92, #d1fdff,#f6f3ff)}  

sample6

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
            
.gradient29 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 20% #d1fdff 100%)}
.gradient31 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 30% #d1fdff 100%)}
.gradient32 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 40% #d1fdff 100%)}
.gradient33 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 50% #d1fdff 100%)}
.gradient34 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 60% #d1fdff 100%)}
.gradient35 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 70% #d1fdff 100%)}
.gradient36 {background: linear-gradient(-225deg, #5ee7df, 0%, #b490ca 80% #d1fdff 100%)}
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);}
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%);}
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 CSS3 Backgrounds by Venerons (@Venerons) on CodePen.

See the Pen Icon Mock Background by Nathan Taylor (@nathantaylor) on CodePen.

See the Pen BG MixMaster 90 — CSS Background Grid /Pattern Generator by Jase (@jasesmith) on CodePen.

See the Pen Material Design Bubble Animation by Ives van Hoorne (@CompuIves) on CodePen.

See the Pen The Cicada background + background-blend-modes by yoksel (@yoksel) on CodePen.