CSS background

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

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

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

gradient1

gradient2

gradient3

gradient4

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

gradient5

gradient6

gradient7

gradient8

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

gradient9

gradient10

gradient11

gradient12

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

gradient13

gradient14

gradient15

gradient16

.gradient13 {background: linear-gradient(0deg, #2af598, #009efd);}
.gradient14 {background: linear-gradient(40deg, #2af598, #009efd);}
.gradient15 {background: linear-gradient(80deg, #2af598, #009efd);}
.gradient16 {background: linear-gradient(120deg, #2af598, #009efd);}

gradient17

gradient18

gradient19

gradient20

.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

gradient22

gradient23

gradient24

.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

gradient26

gradient27

gradient28

.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

gradient30

gradient31

gradient32

.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

gradient34

gradient35

gradient36

gradient37

gradient38

gradient39

gradient40

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

gradient41

gradient42

gradient43

gradient44

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

gradient45

gradient46

gradient47

gradient48

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

gradient49

gradient50

gradient51

gradient52

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

gradient53

gradient54

gradient55

gradient56

.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

gradient58

gradient59

gradient60

.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

gradient62

gradient63

gradient64

.gradient60{background: linear-gradient(180deg, #30cfd0,#330867)fixed;}
.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

gradient65

gradient66

gradient67

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

Linear Gradinet Dffect1

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

Background Effect1

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

Background Effect2

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

Background Effect3

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

출처