CSS로 텍스트에 그라데이션 주는 방법 (with 예제 코드)

 

요즘 세련된 웹사이트들을 보면, 단순한 텍스트가 아닌 그라데이션이 들어간 멋진 글자들을 자주 볼 수 있어요.
이런 스타일은 시선을 끌고, 디자인적으로도 고급스러운 느낌을 줄 수 있어서 많이 사용되고 있습니다.

그런데 텍스트에 직접 색을 칠하는 게 아니라, 배경에 그라데이션을 입힌 후 그 배경을 텍스트에만 보이게 하는 방식으로 구현해요.
지금부터 CSS로 텍스트에 그라데이션 주는 방법을 함께 알아볼게요!

---

✅ 기본 원리

텍스트에 그라데이션을 적용하려면 아래 3가지를 꼭 기억하세요:

1. background: linear-gradient(...)
2. background-clip: text (배경을 텍스트에만 보이게 함)
3. color: transparent (글자 색을 투명하게 해야 배경이 보임)

---

✅ 기본 예제 코드

<h1 class="gradient-text">Gradient Text Example</h1>

<style>
.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

 

🎯 여기서 -webkit- 접두사는 대부분의 브라우저에서 텍스트 클리핑을 지원하기 위해 필요합니다.
background-clip: text는 표준이지만, 브라우저 호환성을 위해 아직은 -webkit-을 붙여 사용하는 게 안전해요.

 

 

---

✅ 다양한 그라데이션 효과 적용 예

🎨 1. 무지개 텍스트

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

🎨 2. 블루톤 글자

background: linear-gradient(to right, #2193b0, #6dd5ed);

🎨 3. 골드 느낌 글자

background: linear-gradient(to right, #FFD700, #FFA500, #FF8C00);

---

💡 팁: 적용 위치와 활용 예

• 로고 텍스트에 적용하면 브랜딩 효과 업!
• 헤드라인이나 슬로건 강조용으로도 좋아요.
• 버튼 안의 텍스트에도 포인트로 활용 가능!

---

🧪 고급: 애니메이션 그라데이션 텍스트

그라데이션에 애니메이션 효과를 주면 더욱 특별한 느낌을 줄 수 있어요.

<h2 class="animated-text">Animated Gradient</h2>

<style>
.animated-text {
  font-size: 40px;
  font-weight: bold;
  background: linear-gradient(270deg, #ff6ec4, #7873f5);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>

---

✅ 마무리

텍스트에 그라데이션을 주는 것만으로도 웹사이트의 분위기를 세련되게 바꿀 수 있어요.
background-clip과 text-fill-color만 잘 기억해두면 어렵지 않게 원하는 스타일을 만들 수 있답니다.

지금 바로 여러분의 홈페이지, 블로그, 포트폴리오에 적용해 보세요!
디자인 퀄리티가 한층 올라가는 걸 느낄 수 있을 거예요 😊