Property | Sample | Description |
---|---|---|
background | background: #000 url("background.gif") no-repeat top center; | 배경 단축형 |
background-image | background-image:url("경로"); | 배경 이미지를 설정합니다. |
background-repeat | background-repeat:no-repeat; | 배경 반복여부를 설정합니다. |
background-attachment | background-attachment:fixed; | 배경 부착 방식 |
background-color | background-color:#fff; | 배경색 |
background-position | background-position:top; | 배경 위치 |
background-origin | background-origin:content-box; | 배경 중심 위치 |
background-size | background-size:cover; | 배경 사이즈 |
background-clip | background-clip:content-box; | 배경 적용범위 |
background: linear-gradient(direction, color1, color2, color3, ....)
Valut | Sample | Description |
---|---|---|
linear-gradient | background: linear-gradient (); | 선형 그라데이션 백그라운드를 설정합니다. |
radial-gradient | background: radial-gradient (); | 원형 그라데이션 백그라운드를 설정합니다. |
.gradient1 {background: linear-gradient(to top, #a18cd1, #fbc2eb)} .gradient2 {background: linear-gradient(to left, #a18cd1, #fbc2eb)} .gradient3 {background: linear-gradient(to right, #a18cd1, #fbc2eb)} .gradient4 {background: linear-gradient(to bottom, #a18cd1, #fbc2eb)}
.gradient5 {background: -webkit-linear-gradient(to top, #a18cd1, #fbc2eb)} .gradient6 {background: -webkit-linear-gradient(to left, #a18cd1, #fbc2eb)} .gradient7 {background: -webkit-linear-gradient(to right, #a18cd1, #fbc2eb)} .gradient8 {background: -webkit-linear-gradient(to bottom, #a18cd1, #fbc2eb)}
.gradient9 {background: -webkit-linear-gradient(left top, #a8edea, #fed6e3)} .gradient10 {background: -webkit-linear-gradient(right top, #a8edea, #fed6e3)} .gradient11 {background: -webkit-linear-gradient(left bottom, #a8edea, #fed6e3)} .gradient12 {background: -webkit-linear-gradient(right bottom, #a8edea, #fed6e3)}
.gradient13 {background: linear-gradient(0deg, #d299c2, #fef9d7)} .gradient14 {background: linear-gradient(20deg, #d299c2, #fef9d7)} .gradient15 {background: linear-gradient(40deg, #d299c2, #fef9d7)} .gradient16 {background: linear-gradient(60deg, #d299c2, #fef9d7)} .gradient17{background: linear-gradient(80deg, #d299c2, #fef9d7)} .gradient18 {background:linear-gradient(100deg, #d299c2, #fef9d7)} .gradient19 {background: linear-gradient(120deg, #d299c2, #fef9d7)} .gradient20 {background: linear-gradient(140deg, #d299c2, #fef9d7)}
.gradient21 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d)} .gradient22 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff)} .gradient23 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96)} .gradient24 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3)} .gradient25{background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8)} .gradient26 {background:linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8 ,#c71d6f)} .gradient27 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8 ,#c71d6f ,#a8caba)} .gradient28 {background: linear-gradient(140deg, #93a5cf, #e4efe9, #92fe9d ,#00c9ff ,#fbed96 ,#ddd6f3 ,#faaca8 ,#c71d6f ,#a8caba ,#16a085)}
.gradient29 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 20%,#e8198b 100%)} .gradient30 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 30%,#e8198b 100%)} .gradient31 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 40%,#e8198b 100%)} .gradient32 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 50%,#e8198b 100%)} .gradient33{background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 60%,#e8198b 100%)} .gradient34 {background:linear-gradient(-225deg, #d299c2 0%, #fef9d7 70%,#e8198b 100%)} .gradient35 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 80%,#e8198b 100%)} .gradient36 {background: linear-gradient(-225deg, #d299c2 0%, #fef9d7 90%,#e8198b 100%)}
.gradient37 {background: radial-gradient(red, yellow);} .gradient38 {background: radial-gradient(red, yellow, blue);} .gradient39 {background: radial-gradient(red, yellow, blue, green);} .gradient40 {background: radial-gradient(red, yellow, blue, green, aqua);} .gradient41 {background: radial-gradient(red, yellow 20%, blue, green, aqua);} .gradient42 {background: radial-gradient(red, yellow 30%, blue, green, aqua);} .gradient43 {background: radial-gradient(red, yellow 40%, blue, green, aqua);} .gradient44 {background: radial-gradient(red, yellow 50%, blue, green, aqua);}
.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 bottom right, #f8bfa4 0%, #f33b4e 100%);} .gradient51 {background: radial-gradient(ellipse farthest-corner at left center, #f8bfa4 0%, #f33b4e 100%);} .gradient52 {background: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}
.gradient53 {background: linear-gradient(0deg, #231557 50%, #FFF800 50%);} .gradient54 {background: linear-gradient(20deg, #231557 50%, #FFF800 50%);} .gradient55 {background: linear-gradient(45deg, #231557 50%, #FFF800 50%);} .gradient56 {background: linear-gradient(60deg, #231557 50%, #FFF800 50%);} .gradient57 {background: linear-gradient(80deg, #231557 50%, #FFF800 50%);} .gradient58 {background: linear-gradient(120deg, #231557 50%, #FFF800 50%);} .gradient59 {background: linear-gradient(150deg, #231557 50%, #FFF800 50%);} .gradient60 {background: linear-gradient(180deg, #231557 50%, #FFF800 50%);}
See the Pen SVG linear gradient: angle in degrees by Nikita Vasilyev (@NV) on CodePen.
See the Pen Color Blend Loader Animation (LESS Version) by Ryan (@rydaly) on CodePen.
See the Pen repeating-linear-gradient background-image by Atticus Koya (@k-ya) on CodePen.
See the Pen SCSS Linear and Radial Gradients by MrPirrera (@pirrera) on CodePen.
See the Pen Trippy Radial Gradients by Ben Briggs (@ben-eb) on CodePen.