텍스트 그라데이션 애니메이션 – Rainbow Shift 효과로 타이틀 강조하기
CSS 25.12.04 조회 15텍스트 그라데이션 애니메이션 – Rainbow Shift 효과로 타이틀 강조하기
텍스트 위에 그라데이션을 흐르듯 움직이게 해타이틀이나 강조 문구를 한눈에 띄게 만드는
Rainbow Shift(레인보우 시프트) 애니메이션을 CSS만으로 구현하는 방법을 소개합니다.
➰➰➰
✅ 텍스트 그라데이션 애니메이션이란?
텍스트에 단순히 색을 넣는 것이 아니라, 그라데이션 배경을 텍스트 모양으로 잘라내어 애니메이션처럼 흐르게 만드는 효과입니다.
특히 메인 타이틀(H1/H2)이나 하이라이트 텍스트에 적용하면 즉각적인 시선 집중 효과가 있어 랜딩페이지(UI/UX)에서 자주 쓰입니다.
✅ 텍스트 그라데이션, 어디에 사용하면 가장 효과적일까?
· 랜딩페이지 메인 타이틀
· 강조 문구
· 할인/혜택/이벤트 배너
· 브랜드 아이덴티티가 강한 소개 섹션
· AI/테크/스타트업 느낌의 디자인
✨ 특히 짧은 문장에 적용할 때 시선 집중 효과가 극대화됩니다.
✨ 텍스트 그라데이션 애니메이션 - Rainbow Shift 효과 따라하기
✏️ HTML은 이렇게 작성해요
1 | <h2>웹사이트 템플릿 전문 플랫폼<span class="gradient">디자인키트</span></h2> | cs |
✏️ CSS는 이렇게 작성해요
background-clip: text
: 텍스트 영역을 mask처럼 사용하여 background-image를 글자 모양으로 잘라냅니다.
background-size: 200%
: 그라데이션이 요소(화면)보다 넓어야 자연스럽게 흐르는 애니메이션으로 구현할 수 있습니다.
background-position
: 0 -> 100% -> 0 으로 이동하며 그라데이션이 자연스럽게 흐르는 것처럼 구현합니다.
1 2 3 | h2{white-space:pre-line;text-align:center;font-size:28px;} h2 span.gradient{background-clip:text;-webkit-background-clip:text;color: transparent;background-image: linear-gradient(to right, #ff3b13 0%, #ff852d 30%, #ffea00 60%, #4ee0ff 100%);background-size: 200% 100%;background-position: 0 0;animation: rainbow-shift 5s ease-in-out infinite;} @keyframes rainbow-shift {0%{ background-position: 0 0;} 50%{ background-position: 100% 0;} 100% {background-position: 0 0;}} | cs |
See the Pen 텍스트 그라데이션 애니메이션 – Rainbow Shift 효과로 타이틀 강조하기 by designkits (@designkits) on CodePen.
➰➰➰
Rainbow Shift 텍스트 애니메이션은
CSS만으로 강한 시각적 임팩트를 만들 수 있는 가장 쉬운 방식입니다.
