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

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

Sample1

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

Sample2

gradient5
gradient6
gradient7
gradient8
.gradient5 {background-image: -webkit-linear-gradient(top, #a18cd1 0%, #fbc2eb 100%);}
.gradient6 {background-image: -webkit-linear-gradient(left, #a18cd1 0%, #fbc2eb 100%);}
.gradient7 {background-image: -webkit-linear-gradient(right, #a18cd1 0%, #fbc2eb 100%);}
.gradient8 {background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);}

Sample3

gradient9
gradient10
gradient11
gradient12
.gradient5 {background-image: -webkit-linear-gradient(top, #a18cd1 0%, #fbc2eb 100%);}
.gradient6 {background-image: -webkit-linear-gradient(left, #a18cd1 0%, #fbc2eb 100%);}
.gradient7 {background-image: -webkit-linear-gradient(right, #a18cd1 0%, #fbc2eb 100%);}
.gradient8 {background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);}

Sample4

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

Sample5

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21 {background-image: linear-gradient(140deg, #fa709a, #fee140);}
.gradient22 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a);}
.gradient23 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0);}
.gradient24 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff);}
.gradient25 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2);}
.gradient26 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd);}
.gradient27 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc);}
.gradient28 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc, #72afd3);}

Sample6

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
.gradient29 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}
.gradient30 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 30%, #453a94 100%);}
.gradient31 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 40%, #453a94 100%);}
.gradient32 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 50%, #453a94 100%);}
.gradient33 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 60%, #453a94 100%);}
.gradient34 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 70%, #453a94 100%);}
.gradient35 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 80%, #453a94 100%);}
.gradient36 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 90%, #453a94 100%);}

Sample7

gradient37
gradient38
gradient39
gradient40
gradient41
gradient42
gradient43
gradient44
.gradient37 {background-image: radial-gradient(#7028e4, #e5b2ca);}
.gradient38 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844);}
.gradient39 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343);}
.gradient40 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600);}
.gradient41 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423);}
.gradient42 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423, #d558c8);}
.gradient43 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423, #d558c8, #fbed96);}
.gradient44 {background-image: radial-gradient(#7028e4, #e5b2ca, #ff0844, #434343, #f83600, #f9d423, #d558c8, #fbed96, #ddd6f3);}

Sample8

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.gradient45 {background-image: radial-gradient(#2a5298 0%, #209cff 20%, #68e0cf 100%);}
.gradient46 {background-image: radial-gradient(#2a5298 0%, #209cff 30%, #68e0cf 100%);}
.gradient47 {background-image: radial-gradient(#2a5298 0%, #209cff 40%, #68e0cf 100%);}
.gradient48 {background-image: radial-gradient(#2a5298 0%, #209cff 50%, #68e0cf 100%);}
.gradient49 {background-image: radial-gradient(#2a5298 0%, #209cff 60%, #68e0cf 100%);}
.gradient50 {background-image: radial-gradient(#2a5298 0%, #209cff 70%, #68e0cf 100%);}
.gradient51 {background-image: radial-gradient(#2a5298 0%, #209cff 80%, #68e0cf 100%);}
.gradient52 {background-image: radial-gradient(#2a5298 0%, #209cff 90%, #68e0cf 100%);}

Sample9

gradient53
gradient54
gradient55
gradient56
gradient57
gradient58
gradient59
gradient60
.gradient53 {background-image: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient54 {background-image: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient55 {background-image: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%);}
.gradient56 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);}
.gradient57 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
.gradient58 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b4e 100%);}
.gradient59 {background-image: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%);}
.gradient60 {background-image: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

Sample10

gradient61
gradient62
gradient63
gradient64
gradient65
gradient66
gradient67
gradient68
.gradient53 {background-image: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient54 {background-image: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient55 {background-image: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%);}
.gradient56 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);}
.gradient57 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
.gradient58 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b4e 100%);}
.gradient59 {background-image: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%);}
.gradient60 {background-image: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

Sample10

gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
gradient76
.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient70 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient71 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient72 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient73 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px)}
.gradient74 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px)}
.gradient75 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px)}
.gradient76 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 15px, #7cb342 45px)}

Sample11

gradient77
gradient78
gradient79
gradient80
gradient81
gradient82
gradient83
gradient84
.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient70 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient71 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient72 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px)}
.gradient73 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px)}
.gradient74 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px)}
.gradient75 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px)}
.gradient76 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 15px, #7cb342 45px)}

Sample11

gradient85
gradient86
gradient87
gradient88
gradient89
gradient90
gradient91
gradient92
.gradient85 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient86 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient87 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient88 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient89 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient90 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient91 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}
.gradient92 {background: linear-gradient(145deg, #30cfd0, #330867) fixed;}

Sample13

gradient93
gradient94
gradient95
gradient96
gradient97
gradient98
gradient99
gradient100
.gradient93 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient94 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient95 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient96 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient97 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient98 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient99 {background: radial-gradient(#30cfd0, #330867) fixed;}
.gradient100 {background: radial-gradient(#30cfd0, #330867) fixed;}

Sample - repeating-linear-gradient

See the Pen Repeating-linear-gradient background by Webstoryboy (@webstoryboy) on CodePen.


Background-pattern

See the Pen Background-pattern by Webstoryboy (@webstoryboy) on CodePen.


Background-pattern

See the Pen Background-pattern by Webstoryboy (@webstoryboy) on CodePen.


Background-pattern

See the Pen Background-pattern by Webstoryboy (@webstoryboy) on CodePen.


Background-pattern

See the Pen background-patten by Webstoryboy (@webstoryboy) on CodePen.


Background Effect1

See the Pen Background Effect1 by Webstoryboy (@webstoryboy) on CodePen.


Background Effect2

See the Pen Background Effect2 by Webstoryboy (@webstoryboy) on CodePen.


Background Random Iamges

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