<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient">👉 linear-gradient() MDN</a>
<h1 id="heading-6ria7jso7jeqioq3uoudvounsoydtoyfmcdtmqjqs7zrhkpqulag67cp67kviq">글씨에 그라데이션 효과넣기 방법!</h1>
<ol>
<li>일단 예시로 <code>&lt;h1&gt;</code> tag를 사용하여 글씨를 작성</li>
<li>CSS에 상위에 <code>background</code>속성에 <code>linear-gradient</code>를 써주고 그라데이션 방향(to right)을 써준 후 원하는색깔을 넣어준다. </li>
<li><code>-webkit-background-clip: text;</code>을 추가! 이 부분이 바로 글씨에 색깔을 넣어줄 수 있다! </li>
<li><code>color: transparent;</code>를 추가로 넣어준다. 
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1669274053950/u7ttT193u.png" alt="image.png" /></li>
</ol>
<pre><code class="lang-html">&lt;!--html--&gt;
&lt;h1&gt;안녕하세요! 만나서 반갑습니다. 신기하네요!&lt;/h1&gt;
</code></pre>
<pre><code class="lang-css">/*css*/
h1 {
 background:linear-gradient(
 to right,
 red,
 orange,
 yellow,
 green,
 blue,
 indigo,
 purple
 );
-webkit-background-clip: text;
 color: transparent;

}
</code></pre>
<blockquote>
오오 너무 신기해! CSS는 이런게 정말 재미있는듯 🤓
</blockquote>

[👉 linear-gradient() MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient)

# 글씨에 그라데이션 효과넣기 방법! 
1. 일단 예시로 `<h1>` tag를 사용하여 글씨를 작성
2. CSS에 상위에 `background`속성에 `linear-gradient`를 써주고 그라데이션 방향(to right)을 써준 후 원하는색깔을 넣어준다. 
3. `-webkit-background-clip: text;`을 추가! 이 부분이 바로 글씨에 색깔을 넣어줄 수 있다! 
4. `color: transparent;`를 추가로 넣어준다. 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669274053950/u7ttT193u.png align="left")

```html

<h1>안녕하세요! 만나서 반갑습니다. 신기하네요!</h1>
```
```css
/*css*/
h1 {
 background:linear-gradient(
 to right,
 red,
 orange,
 yellow,
 green,
 blue,
 indigo,
 purple
 );
-webkit-background-clip: text;
 color: transparent;

}
```
> 오오 너무 신기해! CSS는 이런게 정말 재미있는듯 🤓

[CSS] Add gradation effect to your text!

글씨에 그라데이션 효과넣기 방법!