CSS 그레이더

渐变 배경

CSS 그레이딩은 두 가지 또는 더 많은 지정된 색상 사이의 평滑한 전환을 표시할 수 있습니다。

CSS는 두 가지 유형의 그레이딩을 정의합니다：

  • 선형 그레이딩（아래/위/왼쪽/오른쪽/대각선 방향）
  • 원형 그레이딩（중심에서 정의됨）

CSS 선형 그레이딩

선형 그레이딩을 생성하려면 최소 두 개의 색상표를 정의해야 합니다. 색상표는 원하는 평滑한 전환을 위해 표시할 색상입니다. 또한 시작점과 방향（또는 각도） 및 그레이딩 효과를 설정할 수 있습니다。

문법

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

선형 그레이딩 - 상하 방향（기본）

위에서 시작하는 선형 그레이딩의 예제를 보여줍니다. 빨간색에서 시작하여 노란색으로 이어집니다：

위에서 아래로(기본 설정))

예제

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

직접 시도해보세요

선형 渐变 - 왼쪽에서 오른쪽으로

아래 예제는 왼쪽에서 시작하는 선형 渐变을 보여줍니다. 이는 빨강에서 시작하여 노랑으로 전환합니다:

왼쪽에서 오른쪽으로

예제

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

직접 시도해보세요

선형 渐变 - 대각선

각도 渐变을 구현하려면 수평 및 세로 시작 위치를 지정할 수 있습니다.

아래 예제는 왼쪽 상단에서 시작하여(하단 오른쪽으로) 선형 渐变을 보여줍니다. 이는 빨강에서 시작하여 노랑으로 전환합니다:

왼쪽 상단에서 하단 오른쪽으로

예제

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

직접 시도해보세요

각도 사용

渐变 각도에 더 많은 제어를 원하면, 사전 정의된 방향(아래, 위, 오른쪽, 왼쪽, 오른쪽 아래 등) 대신 각도를 정의할 수 있습니다. 0deg는 위로(위쪽으로)와 같습니다. 90deg는 오른쪽으로(오른쪽으로)와 같습니다. 180deg는 아래로(아래쪽으로)와 같습니다.

180deg

문법

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

이 각도는 수평선과 渐变선 간의 각도를 지정합니다.

아래 예제는 선형 渐变에 대한 각도를 사용하는 방법을 보여줍니다:

예제

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

직접 시도해보세요

여러 색상표 사용

아래 예제는 여러 색상표를 포함한 선형 渐变(위에서 아래로)을 보여줍니다:

예제

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

직접 시도해보세요

아래 예제는彩虹색과 일부 텍스트를 사용하여 선형 渐变(왼쪽에서 오른쪽으로)을 만드는 방법을 보여줍니다:

渐变 배경

예제

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

직접 시도해보세요

투명도 사용

CSS 그레이더는 투명도를 지원하며, 渐变 효과를 생성하는 데도 사용할 수 있습니다.

투명도를 추가하려면 rgba() 함수를 사용하여 색상표를 정의합니다. rgba() 함수의 마지막 매개변수는 0에서 1 사이의 값이며, 투명도를 정의합니다: 0은 완전 투명, 1은 완전彩色(투명도 없음)을 의미합니다.

아래의 예제는 왼쪽에서 시작하는 선형 그레이드닝을 보여줍니다. 완전 투명에서 시작하여 전체 빨간색으로 변합니다:

예제

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

직접 시도해보세요

반복적인 선형 그레이드닝

repeating-linear-gradient() 반복적인 선형 그레이드닝을 위한 함수:

예제

반복적인 선형 그레이드닝:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

직접 시도해보세요