이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

linear-gradient() CSS 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 <image>의 특별한 종류인 <gradient> 자료형입니다.

다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 내재하는 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없습니다. 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.

반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 repeating-linear-gradient 함수를 사용하세요.

<gradient><image>의 한 종류로서 <image>를 사용하는 곳에만 적용할 수 있습니다. 따라서 linear-gradient()background-color<color> 자료형을 받는 속성에는 사용할 수 없습니다.

선형 그레이디언트의 구성

선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. linear-gradient() 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.

linear-gradient.png그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.

시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.

그레이디언트 만들기

그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색의 전환을 그리는 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 <lenngth><percentage>를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 따라서 다음 두 그레이디언트는 동일합니다.

linear-gradient(red, orange, yellow, green, blue); 
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);

기본적으로 그레이디언트에서 색상 전환은 하나의 색상 정지점에서 다른 색상 정지점으로 부드럽게 일어나고, 가운데 지점은 두 색상의 사이값을 가집니다. 그러나 두 색의 사이에 색상 힌트를 넣어, 직접 색의 중간 지점을 정할 수도 있습니다. 다음 예제의 그레이디언트는 시작점에서 10% 지점까지 완전한 빨강, 90% 지점까지 빨강과 파랑 전환, 마지막 10%는 완전한 파랑을 가집니다. 그러나 빨강과 파랑 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.

linear-gradient(red 10%, 30%, blue 90%);

두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.

색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.

linear-gradient(red 40%, yellow 30%, blue 65%);

Multi-position color stop are allowed. A color can be declared as two adjacent color stops by including both positions in the CSS declaration. The following three gradients are equivalent:

linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

By default, if there is no color with a 0% stop, the first color declared will be at that point. Similarly, the last color will continue to the 100% mark, or be at the 100% mark if no length has been declared on that last stop.

구문

/* A gradient tilted 45 degrees,
   starting blue and finishing red */
linear-gradient(45deg, blue, red);

/* A gradient going from the bottom right to the top left corner,
   starting blue and finishing red */
linear-gradient(to left top, blue, red);

/* Color stop: A gradient going from the bottom to top,
   starting blue, turning green at 40% of its length,
   and finishing red */
linear-gradient(0deg, blue, green 40%, red);

/* Color hint: A gradient going from the left to right,
   starting red, getting to the midpoint color
   10% of the way across the length of the gradient,
   taking the rest of the 90% of the length to change to blue */
linear-gradient(.25turn, red, 10%, blue);

/* Multi-position color stop: A gradient tilted 45 degrees,
   with a red bottom-left half and a blue top-right half,
   with a hard line where the gradient changes from red to blue */
linear-gradient(45deg, red 0 50%, blue 50% 100%);

<side-or-corner>
그레이디언트 축의 시작점. 수평속성(left 또는 right) 키워드하나와 수직속성(top 또는 bottom) 키워드 하나, 총 2개의 값으로 구성이 된다. 2개의 값의 순서는 중요하지 않으며, 각 키워드는 옵션으로서 생략이 가능하다.
to top, to bottom, to left, to right 라는 값들은 0deg, 180deg, 270deg, 90deg 로도 각각 전환될 수 있다.
<angle>
그레이디언트 축의 방향. 0degto top과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.
<linear-color-stop>
A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).
<color-hint>
The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

형식 구문

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

예제

45도 기울어진 그레이디언트

body {
  background: linear-gradient(45deg, red, blue);
}

축의 60% 지점에서 시작하는 그레이디언트

body {
  background: linear-gradient(135deg, orange, orange 60%, cyan);
}

색상 정지점 여러개를 가진 그레이디언트

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

body {
  background: linear-gradient(to right, 
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}

Note: Please see Using CSS gradients for more examples.

명세

Specification Status Comment
CSS Images Module Level 4
The definition of 'Gradient Color-Stops' in that specification.
Working Draft Adds interpolation hints.
CSS Images Module Level 3
The definition of 'linear-gradient()' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
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 Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support YesFirefox 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 YesSamsung Internet Android Full support Yes
to keywordChrome Full support 26Edge Full support 12Firefox Full support 10IE Full support 10Opera Full support 12.1Safari Full support 6.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 10Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Double-position color stopsChrome Full support 71Edge No support NoFirefox Full support 64IE No support NoOpera Full support 58Safari ?
Notes
?
Notes
Notes In Safari Technology Preview Release 66
WebView Android Full support 71Chrome Android Full support 71Edge Mobile No support NoFirefox Android Full support 64Opera Android Full support 50Safari iOS ?
Notes
?
Notes
Notes In Safari Technology Preview Release 66
Samsung Internet Android Full support Yes
Interpolation Hints / Gradient MidpointsChrome Full support 40Edge No support NoFirefox Full support 36IE No support NoOpera Full support 27Safari Full support 6.1WebView Android Full support 40Chrome Android Full support 40Edge Mobile No support NoFirefox Android Full support 36Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Unitless 0 for <angle>Chrome Full support 26Edge Full support 12Firefox Full support 55
Full support 55
Partial support 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
IE No support NoOpera Full support 16Safari Full support 6.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 55
Full support 55
Partial support 46
Notes
Notes Accepted only in -webkit-linear-gradient() and -moz-linear-gradient(), not linear-gradient().
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

같이 보기

문서 태그 및 공헌자

최종 변경자: mdnwebdocs-bot,