본문 바로가기
웹코딩 배우기/· CSS

CSS - 배경 그라디언트(그라데이션)

by 닐기 2022. 9. 20.

See the Pen 배경 그라디언트 by nilgi (@nilgi) on CodePen.

 

 

.g1 {background-image: linear-gradient(0deg, red, white);}
.g2 {background-image: linear-gradient(45deg, red, white);}
.g3 {background-image: linear-gradient(90deg, red, white);}
.g4 {background-image: linear-gradient(180deg, red, white);}
.g5 {background-image:-webkit-linear-gradient(left top, blue, white);}
.g6 {background-image:-webkit-linear-gradient(right top, blue, white);}
.g7 {background-image:-webkit-linear-gradient(left bottom, blue, white);}
.g8 {background-image:-webkit-linear-gradient(right bottom, blue, white);}
.g9 {background-image: linear-gradient(45deg, blue, white, tomato, black, orange, gray, green);}
.g10 {background:-webkit-linear-gradient(left, blue, white, tomato, black, orange, gray, green);}
.g11 {background:-webkit-linear-gradient(left, blue 10%, white, tomato 30%, black 10%, orange 10%, gray 10%, green);}
.g12 {background-image: radial-gradient(red, white);}
.g13 {background-image: radial-gradient(red, white, tomato);}
.g14 {background-image: linear-gradient(45deg, tomato 50%, gray 50%);}
.g15 {background-image: repeating-linear-gradient(-45deg, lightblue 5px, lightblue 30px, tomato 5px, tomato 45px);}