[css] linear-gradient

linear-gradient() CSS 함수 (en-US)는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 <gradient> 데이터 유형의 객체이며, 이는 <image>의 특별한 종류 중 하나입니다.

/* 45도 경사를 기준으로
  파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */
linear-gradient(45deg, blue, red);

/* 오른쪽 아래에서 왼쪽 위로,
  파란색에서 시작해서 빨간색으로 변화하는 그라데이션 */
linear-gradient(to left top, blue, red);

/* 색이 중지되는 지점을 명시. 아래에서 위로 시작하여,
   파란색에서 시작한 뒤 총 길이의 40% 지점에서 초록색으로 변화하고,
   마지막에는 빨간색으로 변화하는 그라데이션 */
linear-gradient(0deg, blue, green 40%, red);

/* 색상 힌트. 왼쪽에서 오른쪽으로,
   빨간색에서 시작한 뒤 그라데이션의 길이의 10% 지점에서 중간 색상에 도달하여
   나머지 90%의 길이는 파란색으로 변화하는 그라데이션 */
linear-gradient(.25turn, red, 10%, blue);

/* 여러 색 중지 지점을 명시. 45도 경사를 기준으로
   왼쪽 아래의 절반은 빨간색, 오른쪽 위의 절반은 파란색으로
   뚜렷한 선을 기준으로 변화하는 그라데이션 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);


/*
<side-or-corner>
그라데이션의 시작 지점의 위치. 이 값이 지정될 때에는 to라는 값과 함께 최대 2개의 키워드를 가질 수 있습니다. 한 경우는 left와 right 값을 통해 수평선을 의미하는 방식이고, 다른 경우는 top과 bottom을 이용해 수직선을 의미하는 방식입니다. 각 키워드의 순서는 중요하지 않습니다. 만약 이 값이 명시되지 않으면, 기본적으로 to bottom이 지정됩니다.

to top, to bottom, to left, 그리고 to right은 각각 각도 0deg, 180deg, 270deg, 90deg과 동일합니다. 다른 값의 경우는 각도 그 자체로 해석됩니다.

<angle>
그라데이션 선 방향의 각도. 0deg은 to top과 동일한 의미를 가지며 값이 증가할수록 시계 방향으로 회전합니다.
디폴트는 180deg, to bottom 임

<linear-color-stop>
<color> 값의 색 중지점으로, 하나 혹은 두 개의 중지 위치에 대한 값이 뒤따라옵니다. 중지 위치에 대한 값은 그라데이션의 축을 따라 정해지는 <percentage> 혹은 <length> 값 입니다.

<color-hint>
인접한 색상 중지점 사이에서, 그라데이션이 어떻게 색을 어떻게 변화시킬지를 정의하기 위한 보간 정보. 길이는 두 색상 중지점 사이의 어떤 지점에서 중간 색상에 도달해야 하는지를 명시합니다. 만약 이 값이 명시되지 않으면, 색상 변화의 중간지점은 두 색상 중지점의 중간이 됩니다.


*/

 

컨테이너를 반복하면서 채우는 선형 그라데이션을 생성하기 위해서는 repeating-linear-gradient() (en-US) 함수를 사용하세요.

참고: css 그라데이션의 색 중지점의 렌더링 방식은 SVG 그라데이션과 동일한 규칙