GODRICH

CSS 글자 그라데이션 반짝이는 텍스트 9종 — 한 줄 복붙으로

· Godrich · 9종 · 8분 읽기

피드백SCSSCSS만자동 재생히어로 섹션

css 글자 그라데이션은 글씨 위에 여러 색을 흘려 넣어 단색 글자보다 시선을 오래 붙잡는 효과입니다. 아홉 개 중 하나(03)는 같은 글자를 뒤에 한 겹 더 깔아 후광만 blur 로 만드는데, 부모에 isolation: isolate 를 빼먹으면 그 후광이 무대 배경 뒤로 완전히

아래 격자에서 아홉 개가 자동으로 도는 모습을 먼저 보고, 화면에 맞는 걸 찾으십시오.

01 text-gradient-shine-gradient-text-flow 02 text-gradient-shine-gradient-move 03 text-gradient-shine-neon-glow-text 04 text-gradient-shine-shine-sweep-text 05 text-gradient-shine-glitch-text 06 text-gradient-shine-chrome-metal-text 07 text-gradient-shine-flicker-text 08 text-gradient-shine-outline-glow 09 text-gradient-shine-rainbow-text

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 화려한 순서가 아니라 그러데이션이 글자 위에서 하는 일의 순서로 놓았습니다. 색이 흘러가는 것(01~02), 빛으로 강조하는 것(03~04), 화면이 어긋나거나 표면이 반짝이는 것(05~06), 글자 하나하나가 깜빡이거나 비워지는 것(07~08), 마지막으로 색상환 전체가 도는 것(09)입니다. 데모 글자는 예시 문구일 뿐이니, 실서비스에 쓸 때는 <h1> 안의 텍스트만 바꾸면 코드는 그대로 동작합니다.

01흐르는 그라디언트 텍스트

파랑·크림 그러데이션을 background-clip: text로 글자에 채우고 background-size: 300% 100% 위에서 background-position을 0%에서 100%로 반복 이동시켜 색이 계속 흘러가는 것처럼 보이게 합니다.

background-clip:textbackground-position2s
.flow {
  background: linear-gradient(90deg, $color, $subject-cream, $color, $subject-cream, $color);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: flow $duration $easing infinite;
}
@keyframes flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

02그라디언트 각도 이동

@property로 <angle> 타입 커스텀 프로퍼티를 등록해 linear-gradient()의 각도 자리에 넣고, 그 값만 0deg에서 360deg로 keyframes 로 돌려 그러데이션 자체가 글자 안에서 회전합니다.

@property<angle>linear-gradient
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.spin {
  --angle: 0deg;
  background: linear-gradient(var(--angle), $color, $stage-orange, $color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rotate-angle $duration $easing infinite;
}
@keyframes rotate-angle { from { --angle: 0deg; } to { --angle: 360deg; } }

03네온 글로우 텍스트

같은 글자를 ::before로 한 겹 더 두고 background: inherit로 같은 그러데이션을 물려받게 한 뒤 filter: blur()만 걸어 후광을 만듭니다. 반경과 투명도를 몇 차례 짧게 오가게 해 통째로 꺼졌다 켜지지 않고 숨 쉬듯 빛나게 했습니다.

filter:blur다색 그러데이션숨쉬는 글로우
.neon { position: relative; isolation: isolate; }
.neon::before {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(4px);
  animation: breathe $duration $easing infinite;
}
@keyframes breathe {
  0%, 10%  { filter: blur(4px); opacity: .28; }
  15%, 25% { filter: blur(20px); opacity: 1; }
}

04광택 스윕 텍스트

같은 문구를 두 겹 겹쳐 아래 겹은 단색으로, 위 겹만 좁고 밝은 대각선 띠를 background-clip: text로 채워 background-position으로 한 방향으로 한 번 훑고 지나가게 합니다.

background-position 스윕대각선 하이라이트2s
.light {
  background: linear-gradient(100deg, transparent 42%, rgba($stage-paper, .95) 50%, transparent 58%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep $duration $easing infinite;
}
@keyframes sweep {
  0%  { background-position: 140% 50%; }
  60% { background-position: -40% 50%; }
}

05글리치 텍스트

색이 다른 두 겹을 포개고 가로줄 mask-image의 위치를 steps() 타이밍으로 뚝뚝 끊어 옮겨 스캔라인이 깨지는 느낌을 만듭니다. clip-path로 조각을 썰어 미는 방식은 쓰지 않고, 마스크와 filter: hue-rotate 의 순간적인 튐만으로 어긋남을 표현했습니다.

mask-image steps()hue-rotate스캔라인
.r, .b {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
  animation: mask-jump-r $duration $easing infinite;
}
@keyframes mask-jump-r {
  0%, 40%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 0; }
  45%, 55%      { -webkit-mask-position: 0 3px; mask-position: 0 3px; opacity: .9; }
}

06크롬 메탈 텍스트

어두운 색과 흰색·크림색을 촘촘한 스톱으로 번갈아 넣은 그러데이션을 background-clip: text로 채우고 background-position을 느긋하게 이동시켜, 크롬 표면에 반사광이 지나가는 질감을 만듭니다.

다중 스톱 그러데이션background-position2s · ease-out
.chrome {
  background: linear-gradient(
    100deg,
    $color 0%, $stage-paper 12%, $color 24%,
    $subject-cream 40%, $stage-paper 52%, $color 64%,
    $stage-paper 80%, $color 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reflect $duration $easing infinite;
}

07깜빡임 텍스트

글자를 span으로 하나씩 나눠 --i 변수로 글자마다 다른 지연을 주고 opacity를 짧게 왕복시킵니다. 네온 하나가 통째로 꺼졌다 켜지는 게 아니라, 낡은 전구 마퀴 간판처럼 글자마다 따로 깜빡입니다.

--i 지연opacity 왕복글자별 독립
.marquee span {
  display: inline-block;
  color: $color;
  animation: bulb $duration $easing infinite;
  animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes bulb {
  0%, 40%, 100% { opacity: 1; }
  47%           { opacity: .22; }
  54%           { opacity: 1; }
}

08아웃라인 글로우

글자 속을 color: transparent로 비우고 -webkit-text-stroke로 윤곽선만 남긴 뒤, filter: drop-shadow()의 반경을 키웠다 줄였다 반복해 윤곽선 둘레에 빛이 번지게 합니다.

-webkit-text-strokedrop-shadow빈 윤곽선
.outline {
  color: transparent;
  -webkit-text-stroke: 2px $color;
  animation: glow $duration $easing infinite;
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba($color, .5)); }
  50% {
    filter: drop-shadow(0 0 14px rgba($color, .9))
            drop-shadow(0 0 26px rgba($color, .5));
  }
}

09무지개 텍스트

고정된 무지개 다색 그러데이션을 background-clip: text로 채운 뒤, 위치나 각도가 아니라 filter: hue-rotate를 0deg에서 360deg로 계속 돌려 색상환 전체가 순환하게 합니다.

filter:hue-rotate고정 그러데이션360° 순환
.rainbow {
  background: linear-gradient(90deg, $color, $stage-yellow, $stage-orange, $error, $subject-cream, $color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-cycle $duration $easing infinite;
}
@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

어디서 깨지는가 — 접두사와 @property 지원

01·02·03·04·05·06·09 일곱 개가 쓰는 background-clip: text는 오래도록 접두사가 필요했던 속성입니다. caniuse 의 background-clip-text 지원표를 확인해 보니 Chrome·Edge 는 120부터, Safari 는 15.5부터 접두사 없이 동작하고 그 이전 버전은 -webkit-background-clip: text 가 있어야 글자가 그러데이션으로 채워집니다. 그래서 이 일곱 개 코드 전부 -webkit-background-clip: text 와 -webkit-text-fill-color: transparent 를 접두사 없는 선언과 나란히 넣어 뒀습니다. 05 가 쓰는 mask-image 도 사정이 비슷해서, caniuse 의 CSS Masks 지원표를 보면 Chrome·Edge 는 120부터, Safari 는 15.4부터, Firefox 는 53부터 접두사 없이 동작하고 그 전 버전은 -webkit-mask-image 가 있어야 스캔라인이 보입니다. 03 의 isolation: isolate 는 접두사와는 다른 종류의 함정인데, 후광을 만드는 ::before(z-index: -1)가 부모의 쌓임 맥락 밖으로 빠지면 무대 배경 뒤에 완전히 가려집니다.

02 의 @property는 지원 폭이 더 좁습니다. MDN 의 @property 문서가 정리한 대로 Chrome·Edge 는 85 부터, Safari 는 16.4 부터 지원하지만 Firefox 는 128 이후에야 정식으로 들어왔습니다. @property 가 없는 낡은 브라우저에서는 각도 값이 보간되지 않아 그러데이션이 회전 없이 정지된 채로 보이는데, 레이아웃이 깨지는 건 아니라서 실서비스에 쓸 때는 정지 상태를 기본값으로 여기고 회전은 덤으로 취급하는 편이 안전합니다. 아홉 개 코드 전부를 담아 렌더 측정까지 마친 압축 파일을 열려면 비밀번호 5hzhmkcb 를 입력하십시오. 파일은 바로 아래 카드에서 받아 가시면 됩니다.

접근성

아홉 개 전부 prefers-reduced-motion: reduce를 처리해서, 운영체제에서 "동작 줄이기"를 켠 사람에게는 애니메이션이 꺼지고 그 순간의 색·투명도만 고정된 채 남습니다. 01·02·04·06처럼 위치나 각도가 움직이는 그러데이션은 중간 지점에서 멈추고, 09 는 색상환 회전만 꺼져 원래의 고정 무지개색 그대로 남습니다. 03·08처럼 빛이 숨 쉬는 효과는 은은한 밝기 하나로 고정되며, 05 의 어긋난 두 겹은 사라져 아래에 깔린 그러데이션 글자만 남고, 07 의 깜빡임은 아예 멈춰 모든 글자가 같은 밝기로 보입니다. background-clip: text로 글자 속을 비운 효과들은 색약이나 저채도 모니터에서 대비가 약해질 수 있어, 실제 서비스 헤드라인에는 이 효과 하나만으로 정보를 전달하지 말고 옆에 일반 텍스트나 아이콘을 같이 두는 걸 권합니다. prefers-reduced-motion 자체는 MDN 문서에 정리돼 있습니다.

글자 말고 배경·이미지·버튼에 거는 CSS 효과까지 둘러보고 싶다면 CSS 카테고리 페이지에 더 많은 모음이 있습니다. 이 사이트가 어떤 기준으로 데모를 골라 올리는지는 소개 페이지에 적어 뒀습니다.

FAQ

그러데이션 텍스트에 -webkit- 접두사가 아직도 필요합니까?

방문자 대부분은 이미 Chrome 120·Safari 15.5 이후를 쓰고 있어 접두사 없는 background-clip: text 만으로도 충분합니다. 다만 접두사를 같이 넣는 비용이 거의 없고, 오래된 브라우저에서는 접두사가 없으면 그러데이션 대신 아무 글자도 안 보이는 것보다 나으니 background-clip: text를 쓰는 일곱 개 코드 모두 접두사를 남겨 뒀습니다.

09 번 무지개 텍스트는 색맹 사용자에게 이상하게 보이지 않습니까?

색상환을 도는 효과라 특정 두 색만 구별이 어려운 사람에게도 "색이 계속 바뀐다"는 사실 자체는 전달됩니다. 다만 색 차이로 의미(성공·실패 등)를 구분하는 용도로는 쓰지 말고, 장식적인 타이틀에만 쓰는 걸 권합니다.

아홉 개를 실제 헤드라인 하나에 겹쳐 써도 됩니까?

기술적으로는 가능하지만 권하지 않습니다. background-clip: text와 filter: blur()·mask-image를 동시에 여러 겹 겹치면 브라우저가 매 프레임 다시 그려야 할 레이어가 늘어나, 저사양 모바일에서 버벅임이 먼저 눈에 띕니다. 헤드라인 하나엔 아홉 개 중 하나만 고르는 걸 권합니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.