Background-effect

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....)	반복 원형 그라데이션 백그라운드를 설정합니다.

linear-gradient : top, left, right, bottom

gradient01

gradient02

gradient03

gradient04

.gradient01 { background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); }
.gradient02 { background-image: linear-gradient(to left, #9795f0 0%, #fbc8d4 100%); }
.gradient03 { background-image: linear-gradient(to right, #9795f0 0%, #fbc8d4 100%); }
.gradient04 { background-image: linear-gradient(to bottom, #9795f0 0%, #fbc8d4 100%); }

linear-gradient : top, left, right, bottom

gradient05

gradient06

gradient07

gradient08

.gradient05 { background-image: -webkit-linear-gradient(top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%); }
.gradient06 { background-image: -webkit-linear-gradient(left, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%); }
.gradient07 { background-image: -webkit-linear-gradient(right, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%); }
.gradient08 { background-image: -webkit-linear-gradient(bottom, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%); }

linear-gradient : left top, right top, left top, left bottom, right bottom

gradient09

gradient10

gradient11

gradient12

.gradient09 { background-image: -webkit-linear-gradient(left top, #FFC796 0%, #FF6B95 100%); }
.gradient10 { background-image: -webkit-linear-gradient(right top, #FFC796 0%, #FF6B95 100%); }
.gradient11 { background-image: -webkit-linear-gradient(left bottom, #FFC796 0%, #FF6B95 100%); }
.gradient12 { background-image: -webkit-linear-gradient(right bottom, #FFC796 0%, #FF6B95 100%); }

linear-gradient : deg

gradient13

gradient14

gradient15

gradient16

gradient17

gradient18

gradient19

gradient20

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

linear-gradient : color

gradient21

gradient22

gradient23

gradient24

gradient25

gradient26

gradient27

gradient28

.gradient21 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9); }
.gradient22 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff); }
.gradient23 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff, #64ffda); }
.gradient24 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff, #64ffda, #ea80fc); }
.gradient25 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff, #64ffda, #ea80fc, #ccff90); }
.gradient26 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff, #64ffda, #ea80fc, #ccff90, #f4ff81); }
.gradient27 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff, #64ffda, #ea80fc, #ccff90, #f4ff81, #fffde7); }
.gradient28 { background-image: linear-gradient(-225deg, #7742B2, #F180FF, #FD8BD9, #84ffff, #64ffda, #ea80fc, #ccff90, #f4ff81, #fffde7, #fbe9e7); }

linear-gradient : color position

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

color position2

gradient37

gradient38

gradient39

gradient40

.gradient37 { background-image: linear-gradient(45deg, #84fab0 50%, #8fd3f4 50%); }
.gradient38 { background-image: linear-gradient(90deg, #84fab0 50%, #8fd3f4 50%); }
.gradient39 { background-image: linear-gradient(120deg, #84fab0 50%, #8fd3f4 50%); }
.gradient40 { background-image: linear-gradient(160deg, #84fab0 50%, #8fd3f4 50%); }

color position3

gradient41

gradient42

gradient43

gradient44

.gradient41 { background-image: linear-gradient( 90deg, #d4fc79 50%, #96e6a1 50%); }
.gradient42 { background-image: linear-gradient( 90deg, #d4fc79 33.3333%, #96e6a1 33.3333% 66.6666%, #f4ff81 66.6666%); }
.gradient43 { background-image: linear-gradient( 90deg, #d4fc79 25%, #96e6a1 25% 50%, #f4ff81 50% 75%, #aeea00 75%); }
.gradient44 { background-image: linear-gradient( 90deg, #d4fc79 20%, #96e6a1 20% 40%, #f4ff81 40% 60%, #aeea00 60% 80%, #64dd17 80%); }

linear-gradient : fixed

gradient45

gradient46

gradient47

gradient48

gradient49

gradient50

gradient51

gradient52

.gradient45 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient46 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient47 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient48 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient49 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient50 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient51 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }
.gradient52 { background: linear-gradient(to top, #30cfd0 0%, #330867 100%) fixed; }

radial-gradient : position

gradient60

gradient61

gradient62

gradient63

gradient64

gradient65

gradient66

gradient67

.gradient60 { background-image: radial-gradient(#311b92 0%, #7e57c2 20%, #ede7f6 100%); }
.gradient61 { background-image: radial-gradient(#311b92 0%, #7e57c2 30%, #ede7f6 100%); }
.gradient62 { background-image: radial-gradient(#311b92 0%, #7e57c2 40%, #ede7f6 100%); }
.gradient63 { background-image: radial-gradient(#311b92 0%, #7e57c2 50%, #ede7f6 100%); }
.gradient64 { background-image: radial-gradient(#311b92 0%, #7e57c2 60%, #ede7f6 100%); }
.gradient65 { background-image: radial-gradient(#311b92 0%, #7e57c2 70%, #ede7f6 100%); }
.gradient66 { background-image: radial-gradient(#311b92 0%, #7e57c2 80%, #ede7f6 100%); }
.gradient67 { background-image: radial-gradient(#311b92 0%, #7e57c2 90%, #ede7f6 100%); }

radial-gradient : Color add

gradient68

gradient69

gradient70

gradient71

gradient72

gradient73

gradient74

gradient75

.gradient68 { background-image: radial-gradient(#fce4ec, #f48fb1); }
.gradient69 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a); }
.gradient70 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a, #f50057); }
.gradient71 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a, #f50057, #c2185b); }
.gradient72 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a, #f50057, #c2185b, #880e4f); }
.gradient73 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a, #f50057, #c2185b, #880e4f, #8e24aa); }
.gradient74 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a, #f50057, #c2185b, #880e4f, #8e24aa, #6a1b9a); }
.gradient75 { background-image: radial-gradient(#fce4ec, #f48fb1, #ec407a, #f50057, #c2185b, #880e4f, #8e24aa, #6a1b9a, #4a148c); }

radial-gradient : Color add

gradient76

gradient77

gradient78

gradient79

.bac > div { border-radius: 5px; }
.gradient76 { background-image: radial-gradient(#84ffff 50%, #18ffff 50%); }
.gradient77 { background-image: radial-gradient(#84ffff 33.3333%, #18ffff 33.3333% 66.6666%, #00e5ff 66.6666%); }
.gradient78 { background-image: radial-gradient(#84ffff 25%, #18ffff 25% 50%, #00e5ff 50% 75%, #00b8d4 75%); }
.gradient79 { background-image: radial-gradient(#84ffff 20%, #18ffff 20% 40%, #00e5ff 40% 60%, #00b8d4 60% 80%, #0091ea 80%); }

radial-gradient : position

gradient80

gradient81

gradient82

gradient83

gradient84

gradient85

gradient86

gradient87

.bac3 > div { border-radius: 3px; }
.gradient80 { background-image: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%); }
.gradient81 { background-image: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%); }
.gradient82 { background-image: radial-gradient(ellipse farthest-corner at right top, #f8bfa4 0%, #f33b4e 100%); }
.gradient83 { background-image: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%); }
.gradient84 { background-image: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%); }
.gradient85 { background-image: radial-gradient(ellipse farthest-corner at bottom right, #f8bfa4 0%, #f33b4e 100%); }
.gradient86 { background-image: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%); }
.gradient87 { background-image: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%); }

radial-gradient : fixed

gradient88

gradient89

gradient90

gradient91

gradient92

gradient93

gradient94

gradient95

.bac3 > div { border-radius: 3px; }
.gradient88 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient89 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient90 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient91 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient92 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient93 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient94 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }
.gradient95 { background: radial-gradient(#231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%) fixed; }

radial-gradient : repeating-linear-gradient

gradient100

gradient101

gradient102

gradient103

.gradient100 { background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px); }
.gradient101 { background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px); }
.gradient102 { background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px); }
.gradient103 { background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px); }

radial-gradient : repeating-linear-gradient

gradient104

gradient105

gradient106

gradient107

.gradient104 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient105 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient106 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient107 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

radial-gradient : repeating-linear-gradient

gradient108

gradient109

gradient110

gradient111

.gradient108 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient109 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient110 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient111 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}

radial-gradient : repeating-linear-gradient

gradient112

gradient113

gradient114

gradient115

.gradient112 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient113 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient114 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient115 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}