path: root/files/ko/web/css/linear-gradient()/index.html

---
title: linear-gradient
slug: Web/CSS/linear-gradient()
tags:
  - CSS
  - CSS Function
  - CSS Images
  - Graphics
  - Layout
  - Reference
  - Web
  - gradient
  - 그라데이션
  - 그레이디언트
translation_of: Web/CSS/linear-gradient()
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>linear-gradient()</code></strong> 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("&lt;image&gt;")}}의 특별한 종류인 {{cssxref("&lt;gradient&gt;")}} 자료형입니다.</p>

<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>

<div class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<h2 id="구문">구문</h2>

<pre class="syntaxbox notranslate">/* 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */
linear-gradient(45deg, blue, red);

/* 우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */
linear-gradient(to left top, blue, red);

/* 색상 정지점: 아래에서 위로,
   파랑에서 시작해 길이의 40%에서 초록으로,
   빨강 종료 그레이디언트 */
linear-gradient(0deg, blue, green 40%, red);

/* 색상 힌트: 왼쪽에서 오른쪽으로,
   빨강에서 시작해 길이의 10% 지점에서 중간 색상으로,
   나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */
linear-gradient(.25turn, red, 10%, blue);

/* 다중 위치 색상 정지점: 45도 기울어진,
   좌하단 절반 빨강, 우상단 파랑 절반에
   두 색이 만나는 지점을 정확히 나누는 그레이디언트 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre>

<h3 id="값">값</h3>

<dl>
 <dt><code>&lt;side-or-corner&gt;</code></dt>
 <dd>그레이디언트 축의 시작점. 지정할 경우, <code>to</code> 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(<code style="font-size: 14px;">left</code> 또는 <code>right</code>)이고, 다른 하나는 수직 방향(<code>top</code> 또는 <code>bottom</code>)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 <code>to bottom</code>입니다.</dd>
 <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> 값은 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>와 같습니다. 나머지 값은 각도로 변환됩니다.</dd>
 <dt>{{cssxref("&lt;angle&gt;")}}</dt>
 <dd>그레이디언트 축의 방향. <code>0deg</code>는 <code>to top</code>과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.</dd>
 <dt><code>&lt;linear-color-stop&gt;</code></dt>
 <dd>색상 정지점의 {{CSSxRef("&lt;color&gt;")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("&lt;percentage&gt;")}} 또는 {{CSSxRef("&lt;length&gt;")}})</dd>
 <dt><code>&lt;color-hint&gt;</code></dt>
 <dd><code>color-hint</code>는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.</dd>
 <dd>
 <div class="note">
 <p><strong>참고:</strong> <a href="#다중_위치_색상_정지점을_가진_그레이디언트">CSS 그레이디언트에서의 색상 정지점 렌더링</a>은 <a href="/ko/docs/Web/SVG/Tutorial/Gradients">SVG 그레이디언트</a>에서의 색상 정지점과 동일한 규칙을 따라갑니다.</p>
 </div>
 </dd>
</dl>

<h2 id="설명">설명</h2>

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

<p>반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.</p>

<p><code>&lt;gradient&gt;</code>는 <code>&lt;image&gt;</code>의 한 종류로서 <code>&lt;image&gt;</code>를 사용하는 곳에만 적용할 수 있습니다. 따라서 <code>linear-gradient()</code>는 {{cssxref("background-color")}}와 같은 {{cssxref("&lt;color&gt;")}} 자료형을 받는 속성에는 사용할 수 없습니다.</p>

<h3 id="선형_그레이디언트의_구성">선형 그레이디언트의 구성</h3>

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

<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; font-size: 13.63636302948px; height: 383px; line-height: 19.0909080505371px; width: 309px;">그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.</p>

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

<h4 id="그레이디언트_만들기">그레이디언트 만들기</h4>

<p>그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{cssxref("&lt;length&gt;")}}나 {{cssxref("&lt;percentage&gt;")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.</p>

<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue);
linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre>

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

<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre>

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

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

<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%);
</pre>

<p>색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.</p>

<pre class="brush: css notranslate">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%);</pre>

<p>기본적으로, 0% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.</p>

<h2 id="예제">예제</h2>

<h3 id="45도_기울어진_그레이디언트">45도 기울어진 그레이디언트</h3>

<div class="hidden">
<pre class="brush: css notranslate">body {
  width: 100vw;
  height: 100vh;
}</pre>
</div>

<pre class="brush: css notranslate">body {
  background: linear-gradient(45deg, red, blue);
}
</pre>

<p>{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}</p>

<h3 id="축의_60_지점에서_시작하는_그레이디언트">축의 60% 지점에서 시작하는 그레이디언트</h3>

<div class="hidden">
<pre class="brush: css notranslate">body {
  width: 100vw;
  height: 100vh;
}</pre>
</div>

<pre class="brush: css notranslate">body {
  background: linear-gradient(135deg, orange 60%, cyan);
}</pre>

<p>{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}</p>

<h3 id="다중_위치_색상_정지점을_가진_그레이디언트">다중 위치 색상 정지점을 가진 그레이디언트</h3>

<p>이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.</p>

<div class="hidden">
<pre class="brush: css notranslate">body {
  width: 100vw;
  height: 100vh;
}</pre>
</div>

<pre class="brush: css notranslate">body {
  background: linear-gradient(to right,
     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
}</pre>

<p>{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}</p>

<h3 id="더_많은_예제">더 많은 예제</h3>

<p><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a> 문서에서 더 많은 예제를 확인하세요.</p>

<h2 id="Specifications" name="Specifications">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>Adds interpolation hints.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<div>{{Compat("css.types.image.gradient.linear-gradient")}}</div>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></li>
 <li>다른 그레이디언트 함수: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}</li>
 <li>{{CSSxRef("&lt;image&gt;")}}</li>
 <li>{{cssxref("element()")}}</li>
 <li>{{cssxref("_image","image()")}}</li>
 <li>{{cssxref("image-set","image-set()")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>