CSS에서 Linear-Gradient를 사용하는 방법

CSSlinear-gradient 함수는 직선을 따라 두 개 이상의 색상 간에 점진적으로 전환되는 이미지를 만듭니다. 결과는 특수 유형gradient인 데이터 유형 객체image입니다.

위에서 아래로

이 예에서는 상단에서 시작하는 선형 그래디언트를 보여줍니다. 파란색으로 시작하여 녹색으로 전환됩니다.

background-image: linear-gradient(to bottom, blue, green);

왼쪽에서 오른쪽으로

이 예에서는 왼쪽에서 시작하는 선형 그래디언트를 보여줍니다. 파란색으로 시작하여 노란색으로 전환됩니다.

background-image: linear-gradient(to right, blue, green);

대각선

가로 세로 시작 위치를 지정하여 대각선 방향으로 그라데이션을 만들 수 있습니다.

이 예에서는 왼쪽 상단에서 시작하여 오른쪽 하단으로 이동하는 선형 그래디언트를 보여줍니다. 파란색으로 시작하여 노란색으로 전환됩니다.

background-image: linear-gradient(to bottom right, blue, green);

그래디언트의 방향을 더 제어하려면 미리 정의된 방향(아래, 위, 오른쪽, 왼쪽, 오른쪽 아래 등) 대신 각도를 정의할 수 있습니다. 0deg 값은 top과 동일합니다. 90deg의 값은 to right와 동일합니다. 180deg의 값은 to bottom와 동일합니다.

background-image: linear-gradient(135deg, blue, green);

여러 색상

이 예에서는 여러 색상 정지점이 있는 선형 그래디언트(위에서 아래로)를 보여줍니다.

background-image: linear-gradient(to bottom, blue, yellow, green);