[CSS] 그라데이션 {background: linear-gradient(direction, color, color, color, ...);}

linear-gradient는 두 개 이상의 색상 사이를 선형 방향으로 전환하는 그라데이션을 만들 수 있는 배경 속성입니다.

일반적으로 웹 페이지의 배경, 텍스트 및 기타 요소에 대한 부드러운 색상 전환을 만드는 데 사용됩니다.

 

선형 그라데이션을 만드는 구문은 다음과 같습니다.

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

[direction]은 기울기의 각도 또는 방향을 지정합니다. 각도(예: to right, 45deg 등) 또는 키워드(예: top, bottom, left, right, to top right 등)를 사용하여 지정할 수 있습니다.
color-stop1, color-stop2 등은 그래디언트를 따라 특정 지점의 색상입니다. 색상 이름, HEX 코드, RGB 값 또는 HSL 값을 사용하여 정의할 수 있습니다.

다음은 이해를 돕기 위한 몇 가지 예입니다.

background: linear-gradient(to bottom, #ff0000, #00ff00);

이렇게 하면 요소 상단의 빨간색(#ff0000)에서 하단의 녹색(#00ff00)으로 전환되는 그라데이션이 생성됩니다.

 

왼쪽에서 오른쪽으로 선형 그래디언트:

background: linear-gradient(to right, #ff0000, #00ff00);

이렇게 하면 왼쪽에서 오른쪽으로 수평으로 빨간색에서 녹색으로 전환되는 그라데이션이 만들어집니다.

 

대각선 기울기:

background: linear-gradient(45deg, #ff0000, #00ff00);
background: linear-gradient(45deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
background: linear-gradient(45deg, hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));

이렇게 하면 45도 각도로 빨간색에서 녹색으로 전환되는 그라데이션이 생성됩니다.

 

다중 색상 정지점:

background: linear-gradient(to right, #ff0000, #ff8000, #00ff00);

이렇게 하면 빨간색에서 주황색, 녹색으로 가로로 전환되는 그라데이션이 생성됩니다.

 

백분율과 함께 색상 중단 사용:

background: linear-gradient(to right, #ff0000 20%, #00ff00 80%);

이렇게 하면 요소 너비의 20%에서 빨간색으로 시작하여 너비의 80%에서 녹색으로 전환되는 그라데이션이 생성됩니다.

또한 여러 색상 정지점을 사용하여 색상 간의 부드러운 전환으로 더 복잡한 그라데이션을 만들 수 있습니다. 

linear-gradient 속성은 최신 웹 브라우저에서 지원되며 웹 사이트에서 시각적으로 매력적인 디자인을 만들기 위한 강력한 도구입니다.