linear-gradient

#linear-gradient

linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듬

 

🙄문법

background: linear-gradient( direction, color1, color2, …, color3 );

 

direction : 그라데이션 방향

to bottom : 위에서 아래로 (기본값)
to top : 아래에서 위로 
to left : 오른쪽에서 왼쪽으로
to right : 왼쪽에서 오른쪽으로
ndeg : n도의 방향으로

 

색은 여러개 입력할 수 있으며 입력한 순서로 설정한 방향으로 그라데이션을 생성함

 

그라데이션뿐만아니라 백그라운드가 여러가지 색상일때도 가능!

 

 

 

 

위에 주석처럼도 쓸수 있지만 더 쉽게 아래의 코드로 썼다.

방향 : 아래에서 위로

색상 : 시작점 끝점 (사이값이 높이가 된다.)

 

참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients