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-graidient background : linear-gradient(); 선형 그라데이션 백그라운드를 설정합니다.
radial-graidient background : radial-gradient(); 원형 그라데이션 백그라운드를 설정합니다.

Sample1

gradient1
gradient2
gradient3
gradient4
.block  {width: 180px; height: 180px; margin: 50px; font-size: 18px; line-height: 180px; color: #fff; cursor: pointer; text-align: center; float: left; }
.block>div{border-radius: 50%; }
.gradient1 {background: linear-gradient(to top, #C04063, #fecfef)}
.gradient2 {background: linear-gradient(to bottom, #C04063, #fecfef)}
.gradient3 {background: linear-gradient(to right, #C04063, #fecfef)}
.gradient4 {background: linear-gradient(to left, #C04063, #fecfef)}        

Sample2

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

Sample3

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

Sample4

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

Sample5

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8)}
.gradient22 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3)}
.gradient23 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3, #fff1eb)}
.gradient24 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3, #fff1eb, #ace0f9)}
.gradient25 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3, #fff1eb, #ace0f9,#fbc8d4)}  
.gradient26 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3, #fff1eb, #ace0f9,#fbc8d4,#e4efe9)}   
.gradient27 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3, #fff1eb, #ace0f9,#fbc8d4,#e4efe9,#ae8b9c)}   
.gradient28 {background: -webkit-linear-gradient(140deg, #ebc0fd, #d9ded8, #9890e3, #fff1eb, #ace0f9,#fbc8d4,#e4efe9,#ae8b9c,#fbed96)}     

Sample6

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

Sample7

gradient37
gradient38
gradient39
gradient40
gradient41
gradient42
gradient43
gradient44
.gradient37 {background:radial-gradient(#ebc0fd, palevioletred);}  
.gradient38 {background:radial-gradient(#ebc0fd, palevioletred, #537895);}
.gradient39 {background:radial-gradient(#ebc0fd, palevioletred,#537895, deeppink);}
.gradient40 {background:radial-gradient(#ebc0fd, palevioletred,#537895, deeppink, #f3e7e9);}
.gradient41 {background:radial-gradient(#ebc0fd, palevioletred 20%,#537895, deeppink, #f3e7e9);}
.gradient42 {background:radial-gradient(#ebc0fd, palevioletred 30%,#537895, deeppink, #f3e7e9);}
.gradient43 {background:radial-gradient(#ebc0fd, palevioletred 40%,#537895, deeppink, #f3e7e9);}
.gradient44 {background:radial-gradient(#ebc0fd, palevioletred 50%,#537895, deeppink, #f3e7e9);}

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

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 Animated Gradient Ghost Button Concept by Arsen Zbidniakov (@ARS) on CodePen.

See the Pen News App Concept with CSS Variables by David Khourshid (@davidkpiano) on CodePen.

See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen.

See the Pen Gradient cube #2 by wontem (@wontem) on CodePen.

See the Pen Twitter Example With Firebase by famo.us (@befamous) on CodePen.