CSS linear-gradient() 함수

정의 및 사용법

CSS linear-gradient() 함수는 배경으로 선형 그레이더드를 생성합니다.

선형 그레이더드를 생성하려면, 최소 두 개의 색상표를 정의해야 합니다. 색상표는 그 사이에서 부드러운 전환을 이루고자 하는 색상입니다. 또한, 시작점과 방향(또는 각도) 및 그레이더드 효과를 설정할 수 있습니다.

선형 그레이더드 예제:

실례

예제 1

상단에서 시작하는 선형 그레이더드. 그는 빨간색에서 노란색으로 이동하여, 그리고 파란색으로 이동합니다:

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

직접 테스트해 보세요

예제 2

왼쪽에서 시작하는 선형 그레이더드. 그는 빨간색에서 블루로 이동합니다:

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

직접 테스트해 보세요

예제 3

왼쪽 상단에서 시작하여(오른쪽 하단으로 확장된) 선형 그레이더드:

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

직접 테스트해 보세요

예제 4

각도를 지정한 선형 그레이더드:

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

직접 테스트해 보세요

예제 5

다양한 색상표를 포함한 선형 그레이더드:

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

직접 테스트해 보세요

예제 6

두 개의 위치 색표를 가진 선형 그래디언트:

#grad {
  background: linear-gradient(
    to right,
    레드 17%,
    오렌지 17% 34%,
    노랑 34% 51%,
    그린 51% 68%,
    블루 68% 84%,
    인디고 84%
  );
}

직접 테스트해 보세요

예제 7

투명도를 가진 선형 그래디언트:

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

직접 테스트해 보세요

CSS 문법

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
값 설명
side-or-corner

선택 사항. 그래디언트의 시작점. 키워드 'to'로 시작하고, 그 뒤에 최대 두 개의 다른 키워드를 추가합니다:

  • left 또는 right
  • top 또는 bottom

기본 값은 to bottom(밑으로)입니다.
angle

선택 사항. 그래디언트 라인의 방향 각도:

  • 0deg은 to top(위로)에 해당합니다:
  • 180deg은 to bottom(밑으로)에 해당합니다:
  • 270deg은 to left(오른쪽으로)에 해당합니다:
  • 90deg은 to right(좌측으로)에 해당합니다:
color-stop1, color-stop2,...

필수. 색표는 그 사이에서 원하는 평滑한 전환을 할 색상입니다.

이 값은 하나의 색상 값으로 구성되며, 그 뒤에는 선택 사항으로 하나나 두 개의 위치 색표가 추가됩니다. (0%에서 100% 사이의 퍼센트 또는 그래디언트 축의 길이).

기술 세부 사항

버전： CSS3

브라우저 지원

표에서의 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
linear-gradient()
26 10 16 6.1 12.1
두 위치의 색표
71 79 64 12.1 58

관련 페이지

教程：CSS 그래디언트

참조:CSS background-image 속성

참조:CSS 콘릭 그래디언트() 함수

참조:CSS 원형 그래디언트() 함수

참조:CSS 반복 콘릭 그래디언트() 함수

참조:CSS 반복 선형 그래디언트() 함수

참조:CSS 반복 원형 그래디언트() 함수