[HTML/CSS] 색상 그라이데이션 넣기 (linear-gradient)

linear-gradient : 그라데이션 색상을 넣고 싶을 때 사용하는 옵션이다.

1. 예시
background-image: linear-gradient(blue,pupple);

예제1

기본적으로 방향을 생략하면 to bottom이 적용된다.

따라서 위에서 부터 아래로 이어지는 형태로 색상이 만들어진다. 

예시 2. 
  background-image: linear-gradient(80deg, yellow 20% ,blue 80%);

예제2

deg : 방향을 오른쪽으로 진행한다. (+인 경우)
yellow 20% ,blue 80% : 노랑을 20% 지점까지 표시, 블루를  80% 지점부터 표시 

 

예제3.
 background-image: linear-gradient(-45deg, green 20%, red 20% 50%, green 50% 70%, red 70%);
/* 
-45deg : 방향을 왼쪽으로 진행
green 20% : 녹색 0~20% 구간
red 20% 50%  : 빨강 20% 50% 구간
green 50% 70% :녹색 50~70% 구간
red 70% : 빨강 70%~100% 구간
을 의미함.
*/

예제3

옵션을 이렇게주면 이런 형태도 줄 수 있다.
 . 

linear-gradient() - CSS: Cascading Style Sheets | MDN