<gradient>

<gradient> CSS 자료형은 <image>의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.

CSS 그라데이션은 내재하고 있는 크기가 없습니다. 다른 말로는 실제 크기나 선호 크기가 없습니다. 그라데이션의 크기는 적용하는 요소의 크기와 동일해집니다.

구문

그라데이션 함수

<gradient> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.

선형 그라데이션

가상의 선을 따라 여러 색 사이를 전이합니다. linear-gradient() 함수를 사용해 생성합니다.

<div class="linear-gradient">선형 그라데이션</div>

div {
  width: 240px;
  height: 80px;
}

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

원형 그라데이션

중심점부터 밖으로 여러 색 사이를 전이합니다. radial-gradient() 함수를 사용해 생성합니다.

<div class="radial-gradient">원형 그라데이션</div>

div {
  width: 240px;
  height: 80px;
}

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

반복 그라데이션

요소를 꽉 채울 때까지 그라데이션를 필요한 만큼 반복합니다. repeating-linear-gradient()나 repeating-radial-gradient() 함수를 사용해 생성합니다.

<div class="linear-repeat">반복하는 선형 그라데이션</div>
<br>
<div class="radial-repeat">반복하는 원형 그라데이션</div>

div {
  width: 240px;
  height: 80px;
}

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

보간

색과 관련한 다른 보간과 마찬가지로, 그라데이션도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 <color> 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.

명세

Specification	Status	Comment
CSS Images Module Level 3 The definition of '<gradient>' in that specification.	Candidate Recommendation	Initial definition.

브라우저 호환성

각 그라데이션 유형은 다른 호환성을 가지고 있습니다. 유형별 문서를 참고해주세요.

같이 보기

CSS 그라데이션 사용하기
그라데이션 함수: linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()