background

Porperty	Sample	Description
background	background : #000 url(경로) no-repeat top / cover	배경 속기형 작성법
background-image	background-image : url("경로");	배경 이미지 설정
background-repeat	background-repeat : no-repeat	배경 이미지 반복 여부를 설정
background-attachment	background-attachment : fixed	배경 이미지 고정 여부 설정
background-color	background-color : #fff	백그라운색 색 설정
background-origin	background-origin : content-box;	배경 이미지의 중심 위치를 설정
background-size	background-size : cover	배경 사이즈 설정
background-clip	background-clip : content-box	배경의 적용 범위 설정

Background Gradients

Value	Sample	Description
linear-gradient	background : linear-gradient( )	선형 그라데이션 백그라운들 설정합니다.
radial-gradient	background : radial-gradient( )	원형 그라데이션 백그라운들 설정합니다.
repeating-linear-gradient	background : linear-gradient( )	반복 선형 그라데이션 백그라운들 설정합니다.
repeating-radial-gradient	background : radial-gradient( )	반복 원형 그라데이션 백그라운들 설정합니다.

.block { width: 180px; height: 180px; margin: 50px; font-size: 18px; line-height: 180px; color: #fff;	cursor: pointer; text-align: center; float: left; }
.block.gra1 > div {border-radius: 50%;}

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

.gradient13 {background: linear-gradient(0deg, #fbc2eb, #a18cd1);}
.gradient14 {background: linear-gradient(40deg, #fbc2eb, #a18cd1);}
.gradient15 {background: linear-gradient(80deg, #fbc2eb, #a18cd1);}
.gradient16 {background: linear-gradient(120deg, #fbc2eb, #a18cd1);}

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

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

.gradient17 {background: linear-gradient(140deg, #007adf, #00ecbc);}
.gradient18 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad);}
.gradient19 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad, #b334ef);}
.gradient20 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad, #b334ef, #ff4e50, #ff9a44);}

.gradient21 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad 20%, #b334ef, #ff4e50, #ff9a44);}
.gradient22 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad 40%, #b334ef, #ff4e50, #ff9a44);}
.gradient23 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad 60%, #b334ef, #ff4e50, #ff9a44);}
.gradient24 {background: linear-gradient(140deg, #007adf, #00ecbc, #e14fad 80%, #b334ef, #ff4e50, #ff9a44);}

.gradient25 {background: radial-gradient(#fc6076, #ff9a44);}
.gradient26 {background: radial-gradient(#fc6076, #ff9a44, #00ecbc);}
.gradient27 {background: radial-gradient(#fc6076, #ff9a44, #00ecbc, #b334ef);}
.gradient28 {background: radial-gradient(#fc6076, #ff9a44, #00ecbc, #b334ef, #ff4e50);}

.gradient29 {background: radial-gradient(#fc6076, #ff9a44 20%, #00ecbc, #b334ef, #ff4e50);}
.gradient30 {background: radial-gradient(#fc6076, #ff9a44 40%, #00ecbc, #b334ef, #ff4e50);}
.gradient31 {background: radial-gradient(#fc6076, #ff9a44 60%, #00ecbc, #b334ef, #ff4e50);}
.gradient32 {background: radial-gradient(#fc6076, #ff9a44 80%, #00ecbc, #b334ef, #ff4e50);}

.gradient33 {background: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b3e 100%);}
.gradient34 {background: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b3e 100%);}
.gradient35 {background: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b3e 100%);}
.gradient36 {background: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b3e 100%);}
.gradient37 {background: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b3e 100%);}
.gradient38 {background: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b3e 100%);}
.gradient39 {background: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b3e 100%);}
.gradient40 {background: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b3e 100%);}

.gradient41 {background: linear-gradient(0deg #d61058 50%, #49943 50%);}
.gradient42 {background: linear-gradient(30deg #d61058 50%, #49943 50%);}
.gradient43 {background: linear-gradient(90deg #d61058 50%, #49943 50%);}
.gradient44 {background: linear-gradient(180deg #d61058 50%, #49943 50%);}

.gradient45 {background: repeating-linear-gradient(-45deg, #66a6ff 5px, #66a6ff 30px, #89f7f3 5px, #89f7f3 45px);}
.gradient46 {background: repeating-linear-gradient(-45deg, #66a6ff 10px, #66a6ff 30px, #89f7f3 5px, #89f7f3 45px);}
.gradient47 {background: repeating-linear-gradient(-45deg, #66a6ff 15px, #66a6ff 30px, #89f7f3 5px, #89f7f3 45px);}
.gradient48 {background: repeating-linear-gradient(-45deg, #66a6ff 25px, #66a6ff 30px, #89f7f3 5px, #89f7f3 45px);}

.gradient49 {background: repeating-linear-gradient(-45deg, #66a6ff 5px, #66a6ff 30px, #89f7f3 35px, #89f7f3 45px);}
.gradient50 {background: repeating-linear-gradient(-45deg, #66a6ff 10px, #66a6ff 30px, #89f7f3 40px, #89f7f3 45px);}
.gradient51 {background: repeating-linear-gradient(-45deg, #66a6ff 15px, #66a6ff 30px, #89f7f3 45px, #89f7f3 45px);}
.gradient52 {background: repeating-linear-gradient(-45deg, #66a6ff 25px, #66a6ff 30px, #89f7f3 50px, #89f7f3 45px);}

.gradient53 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 10px);}
.gradient54 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 15px);}
.gradient55 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 20px);}
.gradient56 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 5px, #fbc2eb 25px);}

.gradient57 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 10px, #fbc2eb 10px);}
.gradient58 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 15px, #fbc2eb 15px);}
.gradient59 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 20px, #fbc2eb 20px);}
.gradient60 {background: repeating-radial-gradient(#a18cd1, #a18cd1 5px, #fbc2eb 25px, #fbc2eb 25px);}

.gradient61 {background: linear-gradient(180deg, #30cfd0, #330867) fixed;}
.gradient62 {background: linear-gradient(180deg, #30cfd0, #330867) fixed;}
.gradient63 {background: linear-gradient(180deg, #30cfd0, #330867) fixed;}
.gradient64 {background: linear-gradient(180deg, #30cfd0, #330867) fixed;}

.gradient65 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient66 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient67 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient68 {background: radial-gradient(#30cfd0, #330867) fixed;}

Linear Gradinet Effect1

See the Pen Linear Gradient Mouse Effect by wognsl305 (@wognsl305) on CodePen.

Linear Gradinet Effect2

See the Pen Random Background by wognsl305 (@wognsl305) on CodePen.

Linear Gradinet Effect3

See the Pen Random Gradient Background by wognsl305 (@wognsl305) on CodePen.

Linear Gradinet Effect4

See the Pen Repeating-linear-gradient by wognsl305 (@wognsl305) on CodePen.

http://lea.verou.me/css3patterns/