Background Reference v1.0 </doc>

Background

문법

Background-image : url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | none

sample1

.sBox.v2 > div {width: 152px; height: 152px; line-height: 152px; border: 0;}
.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%);}

sample2

.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(left bottom, #84fab0 0%, #8fd3f4 100%);}

sample3

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

sample4

.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, #ce93d8);}
.gradient21 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #ce93d8, #03a9f4);}
.gradient22 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #ce93d8, #03a9f4, #ffca28);}
.gradient23 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #ce93d8, #03a9f4, #ffca28, #9575cd);}
.gradient24 {background-image: linear-gradient(140deg, #fa709a, #fee140, #fa709a, #30cfd0, #ce93d8, #03a9f4, #ffca28, #9575cd, #7986cb);}

sample5

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

sample6

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

sample7

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

sample8

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

sample9

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

sample10

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

sample11

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

sample12

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

sample13

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

Repeating-linear-gradient

See the Pen xxxmqBe by MiSolJeong (@Soool) on CodePen.

linear-gradient background

See the Pen linear-gradient background by MiSolJeong (@Soool) on CodePen.

Random background image

See the Pen Random background image by MiSolJeong (@Soool) on CodePen.

Background effect1

See the Pen BackgroundEffect by MiSolJeong (@Soool) on CodePen.

Background effect2

See the Pen BackgroundEffect2 by MiSolJeong (@Soool) on CodePen.