<gradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

시도해보기

CSS 그레이디언트는 원본 크기가 없습니다. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.

구문

그레이디언트 함수

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

선형 그레이디언트

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

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

원형 그레이디언트

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

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

반복 그레이디언트

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

css
.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
  );
}

원뿔 그레이디언트

원을 따라 여러 색 사이를 전이합니다. conic-gradient() 함수를 사용해 생성합니다.

css
.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}

보간

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

명세

Specification
CSS Images Module Level 4
# gradients

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<gradient>
conic-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
to keyword
Unitless 0 for <angle>
radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
Gradients applied to pre-multiplied color space (prevents grays from appearing in gradients with transparency)
repeating-conic-gradient()
Hue interpolation method
Interpolation color space
repeating-linear-gradient()
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints
to keyword
Unitless 0 for <angle>
repeating-radial-gradient()
at syntax
Double-position color stops
Hue interpolation method
Interpolation color space
Interpolation Hints / Gradient Midpoints

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기