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

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

구문

그레이디언트 함수

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

선형 그레이디언트

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

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

원형 그레이디언트

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

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

반복 그레이디언트

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

.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() 함수를 사용해 생성합니다.

.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.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<gradient>Chrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox Full support 3.6
Notes
Full support 3.6
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
IE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 12.1
Full support 12.1
No support 11 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Gradients are limited to background-image, border-image, and mask-image.
Opera Android Full support 12.1
Full support 12.1
No support 11 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 7
Full support 7
Full support 6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
conic-gradient()Chrome Full support 69
Full support 69
Full support 59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support NoIE No support NoOpera Full support 56
Full support 56
Full support 46
Disabled
Disabled From version 46: this feature is behind the Enable Experimental Web Platform Features preference.
Safari Full support 12.1WebView Android Full support 69
Full support 69
Full support 59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference.
Chrome Android Full support 69
Full support 69
Full support 59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support NoOpera Android Full support 48
Full support 48
Full support 43
Disabled
Disabled From version 43: this feature is behind the Enable Experimental Web Platform Features preference.
Safari iOS Full support 12.2Samsung Internet Android No support No
linear-gradient()Chrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Full support 12.1
Full support 12.1
No support 11 — 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
No support 11 — 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari iOS Full support 6.1
Full support 6.1
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Samsung Internet Android Full support Yes
radial-gradient()Chrome Full support 26
Full support 26
Full support 13
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Full support 12.1
Full support 12.1
No support 11.6 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 6.1
Full support 6.1
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
Samsung Internet Android Full support Yes
repeating-conic-gradient()Chrome Full support 69
Full support 69
Full support 59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support NoIE No support NoOpera Full support 56
Full support 56
Full support 46
Disabled
Disabled From version 46: this feature is behind the Enable Experimental Web Platform Features preference.
Safari Full support 12.1WebView Android Full support 69
Full support 69
Full support 59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference.
Chrome Android Full support 69
Full support 69
Full support 59
Disabled
Disabled From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support NoOpera Android Full support 48
Full support 48
Full support 43
Disabled
Disabled From version 43: this feature is behind the Enable Experimental Web Platform Features preference.
Safari iOS Full support 12.2Samsung Internet Android No support No
repeating-linear-gradient()Chrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer 5.5 through 9.0 supported gradients via a proprietary filter: -ms-filter: progid:DXImageTransform.Microsoft.Gradient().
Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
No support 11 — 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
WebView Android Full support ≤37
Full support ≤37
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 4
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
Full support 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
No support 11 — 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -o-
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Safari iOS Full support 6.1
Full support 6.1
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(linear,…) function. It is more limited than the later standard version: you cannot specify both a position and an angle like in repeating-linear-gradient(). This old outdated syntax is still supported for compatibility purposes.
Notes Considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right.
Samsung Internet Android Full support Yes
repeating-radial-gradient()Chrome Full support 26
Full support 26
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 3.6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 6.1
Full support 6.1
Full support 5.1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
WebView Android Full support 4.4
Full support 4.4
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 36, gradients weren't applied on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.
Full support 10
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 12 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 7
Full support 7
Full support 6
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Safari 4 was supporting an experimental -webkit-gradient(radial,…) function. This old outdated syntax is still supported for compatibility purposes.
Samsung Internet Android Full support Yes

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.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot
최종 변경자: alattalatta,