<gradient>
CSS 자료형은 <image>
의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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); }
원뿔 그레이디언트
원을 따라 여러 색 사이를 전이합니다. conic-gradient()
함수를 사용해 생성합니다.
<div class="conic-gradient">원뿔 그레이디언트</div>
div { width: 200px; height: 200px; }
.conic-gradient { background: conic-gradient(lightpink, white, powderblue); }
보간
색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 <color>
키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.
명세
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 4 The definition of '<gradient>' in that specification. |
Working Draft | Adds conic-gradient. |
CSS Images Module Level 3 The definition of '<gradient>' in that specification. |
Candidate Recommendation | Initial definition. |
브라우저 호환성
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<gradient> | Chrome
Full support
26
| Edge
Full support
12
| Firefox
Full support
3.6
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
6.1
| WebView Android
Full support
≤37
| Chrome Android
Full support
26
| Firefox Android
Full support
4
| Opera Android
Full support
12.1
| Safari iOS
Full support
7
| Samsung Internet Android
Full support
1.5
|
conic-gradient() | Chrome
Full support
69
| Edge No support No | Firefox No support No | IE No support No | Opera
Full support
56
| Safari Full support 12.1 | WebView Android
Full support
69
| Chrome Android
Full support
69
| Firefox Android No support No | Opera Android
Full support
48
| Safari iOS Full support 12.2 | Samsung Internet Android Full support 10.0 |
linear-gradient() | Chrome
Full support
26
| Edge Full support 12 | Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
6.1
| WebView Android
Full support
≤37
| Chrome Android
Full support
26
| Firefox Android
Full support
16
| Opera Android
Full support
12.1
| Safari iOS
Full support
6.1
| Samsung Internet Android
Full support
1.5
|
radial-gradient() | Chrome
Full support
26
| Edge Full support 12 | Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
6.1
| WebView Android
Full support
≤37
| Chrome Android
Full support
26
| Firefox Android
Full support
16
| Opera Android
Full support
12.1
| Safari iOS
Full support
6.1
| Samsung Internet Android
Full support
1.5
|
repeating-conic-gradient() | Chrome
Full support
69
| Edge No support No | Firefox No support No | IE No support No | Opera
Full support
56
| Safari Full support 12.1 | WebView Android
Full support
69
| Chrome Android
Full support
69
| Firefox Android No support No | Opera Android
Full support
48
| Safari iOS Full support 12.2 | Samsung Internet Android Full support 10.0 |
repeating-linear-gradient() | Chrome
Full support
26
| Edge Full support 12 | Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
12.1
| Safari
Full support
6.1
| WebView Android
Full support
≤37
| Chrome Android
Full support
26
| Firefox Android
Full support
16
| Opera Android
Full support
12.1
| Safari iOS
Full support
6.1
| Samsung Internet Android
Full support
1.5
|
repeating-radial-gradient() | Chrome
Full support
26
| Edge Full support 12 | Firefox
Full support
16
| IE Full support 10 | Opera
Full support
12.1
| Safari
Full support
6.1
| WebView Android
Full support
4.4
| Chrome Android
Full support
26
| Firefox Android
Full support
16
| Opera Android
Full support
12.1
| Safari iOS
Full support
7
| Samsung Internet Android
Full support
1.5
|
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.