Illustrator

background

문법

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

background 1

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

background 2

.gradient1{background-image: linear-gradient(to top, #a18eea, #a18e);}
.gradient2{background-image: linear-gradient(to left, #a18eea, #a18e);}
.gradient3{background-image: linear-gradient(to right, #a18eea, #a18e);}
.gradient4{background-image: linear-gradient(to bottom, #a18eea, #a18e);}

background 3

.gradient5{background-image: linear-gradient(0deg, #388e3c, #f0f4c3);}
.gradient6{background-image: linear-gradient(30deg, #388e3c, #f0f4c3);}
.gradient7{background-image: linear-gradient(90deg,  #388e3c, #f0f4c3);}
.gradient8{background-image: linear-gradient(120deg,  #388e3c, #f0f4c3);}

background 4

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

background 5

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

background 6

.gradient25{background-image: linear-gradient(45deg, #388e3c, #f0f4c3);}
.gradient26{background-image: linear-gradient(90deg, #388e3c, #f0f4c3);}
.gradient27{background-image: linear-gradient(130deg,  #388e3c, #f0f4c3);}
.gradient28{background-image: linear-gradient(160deg,  #388e3c, #f0f4c3);}

background 7

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

background 8

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

background 9

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

background 10

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

background 11

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

background 12

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

background 13

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