CSS linear-gradient() 함수

이 선형 그라데이션은 상단에서 시작됩니다. 빨간색으로 시작하여 노란색으로 전환된 다음 파란색으로 바뀝니다.

#grad {
background-image: linear-gradient(red, yellow, blue);
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

linear-gradient() 함수는 선형 그래디언트를 배경 이미지로 설정합니다.

선형 그래디언트를 생성하려면 최소한 두 개의 색상 정지점을 정의해야 합니다. 색상 정지점은 부드러운 전환을 렌더링하려는 색상입니다. 그라데이션 효과와 함께 시작점과 방향(또는 각도)을 설정할 수도 있습니다.

선형 그라디언트의 예:

버전:	CSS3

표의 숫자는 기능을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Function
linear-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Value	Description
direction	Defines a starting point and a direction (or an angle) along with the gradient effect.
color-stop1, color-stop2,...	Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

왼쪽에서 시작하는 선형 그라데이션입니다. 빨간색으로 시작하여 파란색으로 전환됩니다.

#grad {
background-image: linear-gradient(to right, red , blue);
}

왼쪽 상단에서 시작하여 오른쪽 하단으로 가는 선형 그래디언트:

#grad {
background-image: linear-gradient(to bottom right, red , blue);
}

지정된 각도의 선형 그래디언트:

#grad {
background-image: linear-gradient(180deg, red, blue);
}

여러 색상 정지점이 있는 선형 그라디언트:

#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

투명도가 있는 선형 그래디언트:

#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}