BACKGROUND Reference v1.0 </doc>

Background

문법

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

background1

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

backgound2

.gradient9  {background-image: linear-gradient(0deg, #a6c0fe 0%, #f68084 100%);}
.gradient10 {background-image: linear-gradient(20deg, #a6c0fe 0%, #f68084 100%);}
.gradient11 {background-image: linear-gradient(40deg, #a6c0fe 0%, #f68084 100%);}
.gradient12 {background-image: linear-gradient(60deg, #a6c0fe 0%, #f68084 100%);}
.gradient13 {background-image: linear-gradient(80deg, #a6c0fe 0%, #f68084 100%);}
.gradient14 {background-image: linear-gradient(100deg, #a6c0fe 0%, #f68084 100%);}
.gradient15 {background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);}
.gradient16 {background-image: linear-gradient(140deg, #a6c0fe 0%, #f68084 100%);}

backgound3

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

background4

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

background5

.gradient33 {background-image: linear-gradient(45deg, #c471f5 50%, #fa71cd 50%);}
.gradient34 {background-image: linear-gradient(90deg, #c471f5 50%, #fa71cd 50%);}
.gradient35 {background-image: linear-gradient(120deg, #c471f5 50%, #fa71cd 50%);}
.gradient36 {background-image: linear-gradient(160deg, #c471f5 50%, #fa71cd 50%);}
                

background6

.gradient37 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient38 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient39 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient40 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient41 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient42 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient43 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}
.gradient44 {background: linear-gradient(20deg, #b721ff, #21d4fe) fixed;}

background7

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

background8

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

background9

.gradient61 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient62 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient63 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 10px, #33691e 45px);}
.gradient64 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 10px, #33691e 45px);}

background10

.gradient65 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient66 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient67 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient68 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

background11

.gradient69 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient70 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient71 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient72 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}

background12

.gradient73 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient74 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient75 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient76 {background: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}