background

문법

background-image : url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | none;

종류 예시
url background-image 주소를 설정합니다.
none background-image를 설정하지 않습니다.
linear-gradient 선형 그라데이션 백그라운드를 설정합니다.
radial-gradient 원형 그라데이션 백그라운드를 설정합니다.
repeating-linear-gradient 반복 선형 그라데이션 백그라운드를 설정합니다.
repeating-radial-gradient 반복 원형 그라데이션 백그라운드를 설정합니다.

Gradient1

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

Gradient2

gradient5
gradient6
gradient7
gradient8
.gradient5 {background-image: linear-gradient(0deg, #43e97b 0%, #38f9d7 100%);}
.gradient6 {background-image: linear-gradient(30deg, #43e97b 0%, #38f9d7 100%);}
.gradient7 {background-image: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);}
.gradient8 {background-image: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);}

Gradient3

gradient9
gradient10
gradient11
gradient12
gradient13
gradient14
gradient15
gradient16
.gradient9 {background-image: linear-gradient(140deg, #fa709a, #fee140);}
.gradient10 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a);}
.gradient11 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0);}
.gradient12 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff);}
.gradient13 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2);}
.gradient14 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd);}
.gradient15 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc);}
.gradient16 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #66a6ff, #764ba2, #009efd, #2575fc, #72afd3);}

Gradient4

gradient17
gradient18
gradient19
gradient20
gradient21
gradient22
gradient23
gradient24
.gradient17 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}
.gradient18 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 30%, #453a94 100%);}
.gradient19 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 40%, #453a94 100%);}
.gradient20 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 50%, #453a94 100%);}
.gradient21 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 60%, #453a94 100%);}
.gradient22 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 70%, #453a94 100%);}
.gradient23 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 80%, #453a94 100%);}
.gradient24 {background-image: linear-gradient(140deg, #f43b47 0%, #fa709a 90%, #453a94 100%);}

Gradient5

gradient25
gradient26
gradient27
gradient28
.gradient25 {background-image: linear-gradient(45deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}
.gradient26 {background-image: linear-gradient(90deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}
.gradient27 {background-image: linear-gradient(135deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}
.gradient28 {background-image: linear-gradient(160deg, #f43b47 0%, #fa709a 20%, #453a94 100%);}

Gradient6

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
.gradient29 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient30 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient31 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient32 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient33 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient34 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient35 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}
.gradient36 {background: linear-gradient(20deg, #fa709a, #fee140) fixed;}

Gradien7

gradient37
gradient38
gradient39
gradient40
gradient41
gradient42
gradient43
gradient44
.gradient37 {background: radial-gradient(#2a5298 0%, #209cff 20%, #68e0cf 100%);}
.gradient38 {background: radial-gradient(#2a5298 0%, #209cff 30%, #68e0cf 100%);}
.gradient39 {background: radial-gradient(#2a5298 0%, #209cff 40%, #68e0cf 100%);}
.gradient40 {background: radial-gradient(#2a5298 0%, #209cff 50%, #68e0cf 100%);}
.gradient41 {background: radial-gradient(#2a5298 0%, #209cff 60%, #68e0cf 100%);}
.gradient42 {background: radial-gradient(#2a5298 0%, #209cff 70%, #68e0cf 100%);}
.gradient43 {background: radial-gradient(#2a5298 0%, #209cff 80%, #68e0cf 100%);}
.gradient44 {background: radial-gradient(#2a5298 0%, #209cff 90%, #68e0cf 100%);}

Gradiet8

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.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 center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient51 {background: radial-gradient(ellipse farthest-corner at left top, #f8bfa4 0%, #f33b4e 100%);}
.gradient52 {background: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

Gradiet9

gradient53
gradient54
gradient55
gradient56
.gradient53 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient54 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient55 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient56 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px);}

Gradiet10

gradient57
gradient58
gradient59
gradient60
.gradient57 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient58 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient59 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient60 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

Gradiet11

gradient61
gradient62
gradient63
gradient64
.gradient61 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient62 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient63 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient64 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}

Gradiet12

gradient65
gradient66
gradient67
gradient68
.gradient65 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient66 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient67 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient68 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}