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

<p><strong><code>&lt;gradient&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("&lt;image&gt;")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.</p>

<div>{{EmbedInteractiveExample("pages/css/type-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>

<p>CSS 그레이디언트는 <a href="/ko/docs/Web/CSS/image#no_intrinsic">원본 크기가 없습니다</a>. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.</p>

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

<h3 id="그레이디언트_함수">그레이디언트 함수</h3>

<p><code>&lt;gradient&gt;</code> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.</p>

<h4 id="선형_그레이디언트">선형 그레이디언트</h4>

<p>가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.</p>

<div class="hidden">
<pre class="brush: html">&lt;div class="linear-gradient"&gt;선형 그레이디언트&lt;/div&gt;
</pre>

<pre class="brush: css">div {
  width: 240px;
  height: 80px;
}</pre>
</div>

<pre class="brush: css">.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}</pre>

<p>{{EmbedLiveSample('선형_그레이디언트', 240, 80)}}</p>

<h4 id="원형_그레이디언트">원형 그레이디언트</h4>

<p>중심점으로부터 바깥으로 여러 색 사이를 전이합니다. {{cssxref("radial-gradient()")}} 함수를 사용해 생성합니다.</p>

<div class="hidden">
<pre class="brush: html">&lt;div class="radial-gradient"&gt;원형 그레이디언트&lt;/div&gt;
</pre>

<pre class="brush: css">div {
  width: 240px;
  height: 80px;
}</pre>
</div>

<pre class="brush: css">.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
</pre>

<p>{{EmbedLiveSample('원형_그레이디언트', 240, 80)}}</p>

<h4 id="반복_그레이디언트">반복 그레이디언트</h4>

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

<div class="hidden">
<pre class="brush: html">&lt;div class="linear-repeat"&gt;반복하는 선형 그레이디언트&lt;/div&gt;
&lt;br&gt;
&lt;div class="radial-repeat"&gt;반복하는 원형 그레이디언트&lt;/div&gt;
</pre>

<pre class="brush: css">div {
  width: 240px;
  height: 80px;
}</pre>
</div>

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

<p>{{EmbedLiveSample('반복_그레이디언트', 220, 180)}}</p>

<h4 id="원뿔_그레이디언트">원뿔 그레이디언트</h4>

<p>원을 따라 여러 색 사이를 전이합니다. {{cssxref("conic-gradient", "conic-gradient()")}} 함수를 사용해 생성합니다.</p>

<div class="hidden">
<pre class="brush: html">&lt;div class="conic-gradient"&gt;원뿔 그레이디언트&lt;/div&gt;
</pre>

<pre class="brush: css">div {
  width: 200px;
  height: 200px;
}</pre>
</div>

<pre class="brush: css">.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
</pre>

<p>{{EmbedLiveSample('원뿔_그레이디언트', 240, 80)}}</p>

<h2 id="보간">보간</h2>

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

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

<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>Adds conic-gradient.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("css.types.image.gradient")}}</p>

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

<ul>
 <li><a href="/ko/docs/CSS/Using_CSS_gradients" title="Using gradients">CSS 그레이디언트 사용하기</a></li>
 <li>그레이디언트 함수: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
</ul>