흐르는 그라데이션 텍스트

제작 과정

한 줄 요약

그라데이션을 글자 모양으로 잘라내고 그 그라데이션을 가로로 움직여, 색이 글자를 "통과해 흐르는" 효과를 만든다.

이럴 때 필요해요

브랜드 톤이 강한 hero 카피인용CTA에 정적인 그라데이션 텍스트만 써도 시선이 잡히지만, 살짝의 움직임을 추가하면 "정보 분위기" 전환이 즉시 일어납니다. SVG 마스킹이나 canvas로 만들 필요 없이 한 요소 + 한 keyframe으로 끝나는 게 매력.

어떻게 동작하나

1. 글자 색을 transparent로 만들고, background-image에 좌우로 긴 linear-gradient를 깔아요.

2. background-clip: text로 그 배경을 글자 모양으로만 보이게 자릅니다 (Safari 호환을 위해 -webkit-background-clip도).

3. background-size: 200%로 두 배 폭으로 만든 뒤, keyframe으로 background-position을 0% 200%로 이동 색이 글자를 통과해 흐르는 것처럼 보입니다.

놓치기 쉬운 것

- color: transparent만 두고 -webkit-text-fill-color: transparent를 안 넣으면 Safari에서 글자가 검정으로 보입니다. 둘 다 필수.

- 너무 빠르면 산만하고 너무 느리면 정적으로 느껴집니다. hero 카피는 58초, 인라인 강조는 35초가 자연스러워요.

- 다크 모드에선 채도 높은 색이 더 잘 보입니다. 라이트 모드는 한 톤 어둡게.

이런 곳에 써요

- 랜딩 hero의 핵심 단어 강조

- 브랜드 로고 옆 catch phrase

- AI 제품디자인 툴의 CTA 버튼 호버 효과

import type { Metadata } from "next"; import { AnimatedGradientTextDemo } from "./-components/AnimatedGradientTextDemo"; export const metadata: Metadata = { title: "흐르는 그라데이션 텍스트 (데모)", description: "background-clip:text + linear-gradient + background-position 키프레임으로 글자를 가로지르며 흐르는 그라데이션. JS 없는 순수 CSS.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40"> <AnimatedGradientTextDemo /> </main> ); }