CSS로 배경색에 그라데이션 입히기

CSS background에 있는 linear-gradient 기능으로 배경색에 그라데이션을 입힐 수 있다.

Linear-gradient 기능은 <background: linear-gradient (방향, 색1, 색2, ..., 색n)>의 구조로 사용할 수 있다.

 

 

 

 

 

방향을 지정하지 않았을 시, 디폴트는 위에서 아래 방향이 된다. 

background: linear-gradient(red, blue);

 

방향은 To top, to bottom, to right, to left로 지정할 수도 있으며,

0 deg, 180 deg, 90 deg, 270 deg로 지정할 수도 있다. 

 

디폴트는 To bottom, 그리고 180 deg이다. deg의 경우 숫자가 커질수록 시계 방향으로 이동한다.

 

background: linear-gradient(0deg, yellow, lightGreen);
background: linear-gradient(to top, yellow, lightGreen);

두 코드는 모두 같은 결과를 가진다.

대각선 방향으로 그라데이션을 입히고 싶을 때 deg가 유용하다.

 

background: linear-gradient(45deg, Violet, Orange);

 

세 가지 이상의 색을 지정하는 것도 가능하다.

 

background: linear-gradient(lightCyan, skyBlue, deepSkyBlue);

 

색이 변하는 지점도 설정 가능하다. 색상을 지정한 후 코마를 찍기 전에 **%를 설정하면, 그 지점까지 색이 유지된다. 

 

background: linear-gradient(Red 70%, Orange);

이처럼 그라데이션을 이용하면 보다 다채로운 배경을 설정할 수 있다.