Background Reference v1.0 </doc>

Background

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

Gradient01

.gradient01 {background-image: linear-gradient(to top, #ffecd2, #fcb69f);}
.gradient02 {background-image: linear-gradient(to right, #ffecd2, #fcb69f);}
.gradient03 {background-image: linear-gradient(to bottom, #ffecd2, #fcb69f);}
.gradient04 {background-image: linear-gradient(to left, #ffecd2, #fcb69f);}

Gradient02

.gradient05 {background-image: linear-gradient(0deg, #d4fc79, #96e6a1);}
.gradient06 {background-image: linear-gradient(30deg, #d4fc79, #96e6a1);}
.gradient07 {background-image: linear-gradient(60deg, #d4fc79, #96e6a1);}
.gradient08 {background-image: linear-gradient(90deg, #d4fc79, #96e6a1);}

Gradient03

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

Gradient04

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

Gradient05

.gradient25 {background-image: linear-gradient(0deg, #c471f5 50%, #fa71cd 50%);}
.gradient26 {background-image: linear-gradient(30deg, #c471f5 50%, #fa71cd 50%);}
.gradient27 {background-image: linear-gradient(60deg, #c471f5 50%, #fa71cd 50%);}
.gradient28 {background-image: linear-gradient(90deg, #c471f5 50%, #fa71cd 50%);}
.gradient29 {background-image: linear-gradient(120deg, #c471f5 50%, #fa71cd 50%);}
.gradient30 {background-image: linear-gradient(150deg, #c471f5 50%, #fa71cd 50%);}
.gradient31 {background-image: linear-gradient(180deg, #c471f5 50%, #fa71cd 50%);}
.gradient32 {background-image: linear-gradient(210deg, #c471f5 50%, #fa71cd 50%);}

Gradient06

.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;}
.gradient37 {background: linear-gradient(20deg, #FA709A, #FEE140) fixed;}
.gradient38 {background: linear-gradient(20deg, #FA709A, #FEE140) fixed;}
.gradient39 {background: linear-gradient(20deg, #FA709A, #FEE140) fixed;}
.gradient40 {background: linear-gradient(20deg, #FA709A, #FEE140) fixed;}

Gradient07

.gradient41 {background: radial-gradient(#2A5298 0%, #209CFF 20%, #68E0CF 100%);}
.gradient42 {background: radial-gradient(#2A5298 0%, #209CFF 30%, #68E0CF 100%);}
.gradient43 {background: radial-gradient(#2A5298 0%, #209CFF 40%, #68E0CF 100%);}
.gradient44 {background: radial-gradient(#2A5298 0%, #209CFF 50%, #68E0CF 100%);}
.gradient45 {background: radial-gradient(#2A5298 0%, #209CFF 60%, #68E0CF 100%);}
.gradient46 {background: radial-gradient(#2A5298 0%, #209CFF 70%, #68E0CF 100%);}
.gradient47 {background: radial-gradient(#2A5298 0%, #209CFF 80%, #68E0CF 100%);}
.gradient48 {background: radial-gradient(#2A5298 0%, #209CFF 90%, #68E0CF 100%);}

Gradient08

.gradient49 {background: radial-gradient(ellipse farthest-corner at center top, #F8BFA4 0%, #F33B4E 100%);}
.gradient50 {background: radial-gradient(ellipse farthest-corner at left top, #F8BFA4 0%, #F33B4E 100%);}
.gradient51 {background: radial-gradient(ellipse farthest-corner at right top, #F8BFA4 0%, #F33B4E 100%);}
.gradient52 {background: radial-gradient(ellipse farthest-corner at bottom left, #F8BFA4 0%, #F33B4E 100%);}
.gradient53 {background: radial-gradient(ellipse farthest-corner at bottom center, #F8BFA4 0%, #F33B4E 100%);}
.gradient54 {background: radial-gradient(ellipse farthest-corner at center top, #F8BFA4 0%, #F33B4E 100%);}
.gradient55 {background: radial-gradient(ellipse farthest-corner at left top, #F8BFA4 0%, #F33B4E 100%);}
.gradient56 {background: radial-gradient(ellipse farthest-corner at right center, #F8BFA4 0%, #F33B4E 100%);}

Gradient09

.gradient57 {background-image: radial-gradient(#e14fad, #f9d423);}
.gradient58 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1);}
.gradient59 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8);}
.gradient60 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb);}
.gradient61 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da);}
.gradient62 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4);}
.gradient63 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4, #80deea);}
.gradient64 {background-image: radial-gradient(#e14fad, #f9d423, #f48fb1, #ce93d8, #b39ddb, #9fa8da, #80cbc4, #80deea, #cddc39);}

Gradient10

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

Gradient11

.gradient69 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient70 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient71 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient72 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

Gradient12

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

Gradient13

.gradient77 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient78 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient79 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient80 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

Sample01

Sample01

See the Pen Background Effect01 by heemwon (@heemwon) on CodePen.

Sample02

Sample02

See the Pen eYzbbwo by heemwon (@heemwon) on CodePen.

Sample03

Sample03

See the Pen gOMZqPX by heemwon (@heemwon) on CodePen.

Sample04

마우스 좌표값 pageX를 이용하여 백그라운드 색을 변경하는 예제입니다.

See the Pen Background Effect04 by heemwon (@heemwon) on CodePen.

Sample05

setInterval를 이용해서 3초에 한번씩 백그라운드 컬러를 변경하는 예제입니다.

See the Pen Background Effect05 by heemwon (@heemwon) on CodePen.

Sample06

setInterval를 이용해서 3초에 한번씩 백그라운드 컬러를 변경하는 예제입니다.

See the Pen Background Effect06 by heemwon (@heemwon) on CodePen.