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 Gradients

background: linear-gradient(direction, color1, color2, ...);

Value	Sample	Description
linear-gradient	background:linear-gradient;	선형 그라데이션 백그라운를 설정합니다.
radial-gradient	background:radial-gradient;	원형 그라데이션 백그라운를 설정합니다.

Sample1

.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 {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 {background: -webkit-linear-gradient(left top, #74ebd5, #9face6);}
.gradient10 {background: -webkit-linear-gradient(right top, #74ebd5, #9face6);}
.gradient11 {background: -webkit-linear-gradient(left bottom, #74ebd5, #9face6);}
.gradient12 {background: -webkit-linear-gradient(right bottom, #74ebd5, #9face6);}

Sample4

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

Sample5

.gradient21 {background: linear-gradient(140deg, #ee9ca7, #ffdde1);}
.gradient22 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd);}
.gradient23 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd, #e8198b);}
.gradient24 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd, #e8198b, #e3eeff);}
.gradient25 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd, #e8198b, #e3eeff,#f3e7e9);}
.gradient26 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd, #e8198b, #e3eeff,#f3e7e9, #faaca8);}
.gradient27 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd, #e8198b, #e3eeff,#f3e7e9, #faaca8, #fbed96);}
.gradient28 {background: linear-gradient(140deg, #ee9ca7, #ffdde1, #c7eafd, #e8198b, #e3eeff,#f3e7e9, #faaca8, #fbed96, #abecd6);}

Sample6

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

Sample7

.gradient37 {background: radial-gradient(#92fe9d, #00c9ff);}
.gradient38 {background: radial-gradient(#92fe9d, #00c9ff, #93a5cf);}
.gradient39 {background: radial-gradient(#92fe9d, #00c9ff, #93a5cf, #93a5cf);}
.gradient40 {background: radial-gradient(#92fe9d, #00c9ff, #93a5cf, #93a5cf,#e5b2ca);}
.gradient41 {background: radial-gradient(#92fe9d, #00c9ff 20%, #93a5cf, #93a5cf,#e5b2ca, #6e45e2);}
.gradient42 {background: radial-gradient(#92fe9d, #00c9ff 30%, #93a5cf, #93a5cf,#e5b2ca, #6e45e2, #88d3ce);}
.gradient43 {background: radial-gradient(#92fe9d, #00c9ff 40%, #93a5cf, #93a5cf,#e5b2ca, #6e45e2, #88d3ce, #8989ba);}
.gradient44 {background: radial-gradient(#92fe9d, #00c9ff 50%, #93a5cf, #93a5cf,#e5b2ca, #6e45e2, #88d3ce, #8989ba, #74ebd5);}

Sample8

.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 {background: linear-gradient(0deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient54 {background: linear-gradient(20deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient55 {background: linear-gradient(45deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient56 {background: linear-gradient(60deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient57 {background: linear-gradient(80deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient58 {background: linear-gradient(120deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient59 {background: linear-gradient(150deg, #ee9ca7 50%, #ffdde1 50.1%);}
.gradient60 {background: linear-gradient(180deg, #ee9ca7 50%, #ffdde1 50.1%);}