CSS テキストグラデーションアニメーション 9選 — 一行でコピペOK

2026-09-10 · Godrich · 9種 · 8分で読める

css テキストグラデーションアニメーションは、文字の中に流し込んだ色が動いたり光を放ったりして見える、background-clip:textやfilterだけで組める小さな演出です。この記事では9種類を選び、6〜25行のコードとして実装しました。

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

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01 流れるグラデーション文字
02 グラデーション角度移動
03 ネオングロー文字
04 光沢スイープ文字
05 グリッチ文字
06 クロームメタル文字
07 点滅文字
08 アウトライングロー
09 虹色文字

9つは派手さの順ではなく、テキストにグラデーション css をどう効かせるかという順番に並べました。色そのものが流れていくもの(01・02)、光で強調するもの(03・04)、画面がずれたり表面が反射したりするもの(05・06)、文字が一つずつ点滅したり空洞になったりするもの(07・08)、最後は色相環そのものが回るもの(09)という流れです。デモの文言はただの例なので、実際に使うときは<h1>の中身だけ差し替えればコードはそのまま動きます。見出しを載せる土台がカードならCSS カードホバーアニメーションを先に決めておくと収まりがよく、同じ切り抜きグラデーションを小さな操作部品に移したいときはCSS トグルスイッチが近い作りです。

01流れるグラデーション文字

css グラデーションテキストの流し方

文字にグラデーションをbackground-clip:textで流し込み、大きめのbackground-sizeの上でbackground-positionを左右に動かすと、色が文字の中を流れ続けているように見えます。

どこで使うか

LPヒーローの見出しやプロモバナーのコピーに向いています。

<main class="stage">
  <h1 class="flow">夏のセール開始</h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 흐름 한 바퀴가 도는 시간
$easing: linear;                                    // 속도 변화 없이 일정하게 흘러야 끊김이 없다
$color: $subject-blue;                              // 그러데이션의 기준 색

@include stage($stage-ink);

.flow {
  margin: 0;
  font-weight: 800; font-size: clamp(28px, 8.6vw, 46px); line-height: 1.2; font-family: inherit;
  text-align: center;
  background: linear-gradient(90deg, $color, $subject-cream, $color, $subject-cream, $color);
  background-size: 300% 100%;
  -webkit-background-clip: text;                    // Chrome·Edge 119 이하, Safari 15.4 이하는 접두사가 있어야 한다
  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%; }
}

@media (prefers-reduced-motion: reduce) {
  .flow { animation: none; background-position: 40% 50%; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.flow {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 8.6vw, 46px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(90deg, #2f6df6, #fff7e6, #2f6df6, #fff7e6, #2f6df6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: flow 2s linear infinite;
}

@keyframes flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flow {
    animation: none;
    background-position: 40% 50%;
  }
}

import type { CSSProperties } from "react";
import styles from "./GradientTextFlow.module.scss";

export type GradientTextFlowProps = {
  text: string;
  /** 흐름 한 바퀴가 도는 시간 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 그러데이션 기준 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function GradientTextFlow({
  text,
  duration = 2000,
  easing = "linear",
  color = "#2f6df6",
}: GradientTextFlowProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return <h1 className={styles.flow} style={vars}>{text}</h1>;
}

新しいタブで開く

01 · 流れるグラデーション文字 — 計測累積面積 3.461% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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で型のカスタムプロパティを登録してlinear-gradient()の角度に入れ、0degから360degへkeyframesで回すと、グラデーション自体が文字の中で回転します。

どこで使うか

カードタイトルの強調や会員バッジの文言に向いています。

<main class="stage">
  <h1 class="spin">プレミアム会員</h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 각도가 한 바퀴(360deg) 도는 시간
$easing: linear;
$color: $subject-ink;                               // 노란 무대와 대비되는 글자 기준 색

@include stage($stage-yellow);

// 각도 자체를 보간 가능한 값으로 등록해야 gradient() 각도 자리를 keyframes 로 돌릴 수 있다
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.spin {
  margin: 0;
  font-weight: 800; font-size: clamp(28px, 8.6vw, 46px); line-height: 1.2; font-family: inherit;
  text-align: center;
  --angle: 0deg;
  background: linear-gradient(var(--angle), $color, $stage-orange, $color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rotate-angle $duration $easing infinite;
}

@keyframes rotate-angle {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; --angle: 45deg; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.spin {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 8.6vw, 46px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
  --angle: 0deg;
  background: linear-gradient(var(--angle), #17141a, #ff4d1f, #17141a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rotate-angle 2s linear infinite;
}

@keyframes rotate-angle {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation: none;
    --angle: 45deg;
  }
}

import type { CSSProperties } from "react";
import styles from "./GradientAngleMove.module.scss";

export type GradientAngleMoveProps = {
  text: string;
  /** 각도가 360deg 한 바퀴 도는 시간 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 글자 기준 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function GradientAngleMove({
  text,
  duration = 2000,
  easing = "linear",
  color = "#17141a",
}: GradientAngleMoveProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return <h1 className={styles.spin} style={vars}>{text}</h1>;
}

新しいタブで開く

02 · グラデーション角度移動 — 計測累積面積 3.865% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@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ネオングロー文字

どう動くか

同じ文字をもう1枚背後に重ねてfilter:blur()だけをかけ、ぼかし半径を大小させると、丸ごと点滅するネオンではなく呼吸するように柔らかく光ります。親要素にposition:relativeとisolation:isolateがないと、この背後のレイヤーが舞台の背景色の下に完全に隠れてしまいます。

どこで使うか

ダークヒーローのバッジやライブ状態のタイトルに向いています。

<main class="stage">
  <h1 class="neon" data-text="ライブ配信中">ライブ配信中</h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 후광이 커졌다 작아지는 숨쉬기 한 주기
$easing: linear;                                    // 일정한 속도라야 매 프레임이 이전 프레임과 확실히 달라진다
$color: $subject-blue;                              // 후광 색

@include stage($stage-orange);

.neon {
  position: relative;
  isolation: isolate;                                 // 새 쌓임 맥락을 만들어 ::before(z-index:-1)가 무대 배경 뒤로 빠지지 않게 한다
  margin: 0;
  font-weight: 800; font-size: clamp(26px, 8vw, 42px); line-height: 1.2; font-family: inherit;
  text-align: center;
  background: linear-gradient(90deg, $color, $subject-cream);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

// 같은 글자를 뒤에 겹쳐 filter: blur 로만 후광을 만든다 (색은 글자와 같은 그러데이션)
.neon::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: blur(8px);
  animation: breathe $duration $easing infinite;    // on/off 로 꺼졌다 켜지지 않고, 흐림 반경만 숨쉬듯 오간다
}

// 부드러운 단일 곡선 대신 짧게 여러 번 오간다 — 프레임 간 변화폭을 충분히 크게 유지하기 위해서다
@keyframes breathe {
  0%, 10%   { filter: blur(4px);  opacity: .28; }
  15%, 25%  { filter: blur(20px); opacity: 1; }
  30%, 40%  { filter: blur(4px);  opacity: .28; }
  45%, 55%  { filter: blur(20px); opacity: 1; }
  60%, 70%  { filter: blur(4px);  opacity: .28; }
  75%, 85%  { filter: blur(20px); opacity: 1; }
  90%, 100% { filter: blur(4px);  opacity: .28; }
}

@media (prefers-reduced-motion: reduce) {
  .neon::before { animation: none; filter: blur(10px); opacity: .85; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.neon {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-weight: 800;
  font-size: clamp(26px, 8vw, 42px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(90deg, #2f6df6, #fff7e6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.neon::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: blur(8px);
  animation: breathe 2s linear infinite;
}

@keyframes breathe {
  0%, 10% {
    filter: blur(4px);
    opacity: 0.28;
  }
  15%, 25% {
    filter: blur(20px);
    opacity: 1;
  }
  30%, 40% {
    filter: blur(4px);
    opacity: 0.28;
  }
  45%, 55% {
    filter: blur(20px);
    opacity: 1;
  }
  60%, 70% {
    filter: blur(4px);
    opacity: 0.28;
  }
  75%, 85% {
    filter: blur(20px);
    opacity: 1;
  }
  90%, 100% {
    filter: blur(4px);
    opacity: 0.28;
  }
}
@media (prefers-reduced-motion: reduce) {
  .neon::before {
    animation: none;
    filter: blur(10px);
    opacity: 0.85;
  }
}

import type { CSSProperties } from "react";
import styles from "./NeonGlowText.module.scss";

export type NeonGlowTextProps = {
  text: string;
  /** 후광이 숨쉬는 한 주기 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 후광 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function NeonGlowText({
  text,
  duration = 2000,
  easing = "linear",
  color = "#2f6df6",
}: NeonGlowTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <h1 className={styles.neon} style={vars} data-text={text}>
      {text}
    </h1>
  );
}

新しいタブで開く

03 · ネオングロー文字 — 計測累積面積 10.16% · 動いたフレーム 12/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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で一方向に一度だけ走らせると金属に光が当たったように見えます。

どこで使うか

プレミアム会員バッジやVIP限定タイトルに向いています。

<main class="stage">
  <h1 class="sheen">
    <span class="sheen__base">ゴールド会員限定</span>
    <span class="sheen__light" aria-hidden="true">ゴールド会員限定</span>
  </h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 빛 띠가 한 번 훑고 돌아오는 시간
$easing: $ease-out;
$color: $subject-ink;                               // 바탕 글자 색 (금속처럼 진하게)

@include stage($stage-paper);

.sheen {
  position: relative;
  margin: 0;
  font-weight: 800; font-size: clamp(26px, 8vw, 42px); line-height: 1.2; font-family: inherit;
  text-align: center;
}

.sheen__base, .sheen__light {
  display: block;
  grid-area: 1 / 1;
}
.sheen { display: grid; }                           // 두 겹을 같은 자리에 포갠다

.sheen__base { color: $color; }

.sheen__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;
  -webkit-text-fill-color: transparent;
  animation: sweep $duration $easing infinite;
}

@keyframes sweep {
  0%   { background-position: 140% 50%; }
  60%  { background-position: -40% 50%; }
  100% { background-position: -40% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sheen__light { animation: none; background-position: 50% 50%; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.sheen {
  position: relative;
  margin: 0;
  font-weight: 800;
  font-size: clamp(26px, 8vw, 42px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
}

.sheen__base, .sheen__light {
  display: block;
  grid-area: 1/1;
}

.sheen {
  display: grid;
}

.sheen__base {
  color: #17141a;
}

.sheen__light {
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sweep 2s ease-out infinite;
}

@keyframes sweep {
  0% {
    background-position: 140% 50%;
  }
  60% {
    background-position: -40% 50%;
  }
  100% {
    background-position: -40% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sheen__light {
    animation: none;
    background-position: 50% 50%;
  }
}

import type { CSSProperties } from "react";
import styles from "./ShineSweepText.module.scss";

export type ShineSweepTextProps = {
  text: string;
  /** 빛 띠가 한 번 훑고 돌아오는 시간 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 바탕 글자 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ShineSweepText({
  text,
  duration = 2000,
  easing = "ease-out",
  color = "#17141a",
}: ShineSweepTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <h1 className={styles.sheen} style={vars}>
      <span className={styles.base}>{text}</span>
      <span className={styles.light} aria-hidden="true">{text}</span>
    </h1>
  );
}

新しいタブで開く

04 · 光沢スイープ文字 — 計測累積面積 2.915% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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グリッチ文字

どう動くか

色違いの2枚を重ね、横縞のmask-imageの位置をsteps()のタイミングで飛び飛びに動かしてスキャンラインを崩し、同じ瞬間にfilter:hue-rotateを一瞬跳ねさせて色をずらします。clip-pathで切って動かす方式ではなく、マスクの位置ジャンプだけでこの崩れを作っています。

どこで使うか

エラー・警告バナーのタイトルやメンテナンス案内に向いています。

<main class="stage">
  <h1 class="glitch" data-text="システムエラー">
    <span class="glitch__base">システムエラー</span>
    <span class="glitch__r" aria-hidden="true">システムエラー</span>
    <span class="glitch__b" aria-hidden="true">システムエラー</span>
  </h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 스캔라인이 어긋났다 돌아오는 한 주기
$easing: steps(2, jump-none);                       // 부드럽게 잇지 않고 뚝뚝 끊겨야 글리치답다
$color: $error;                                      // 어긋나는 레이어 한쪽 색

@include stage($stage-ink);

.glitch {
  position: relative;
  margin: 0;
  font-weight: 800; font-size: clamp(26px, 8.2vw, 42px); line-height: 1.2; font-family: inherit;
  text-align: center;
}

.glitch__base, .glitch__r, .glitch__b {
  display: block;
  grid-area: 1 / 1;
}
.glitch { display: grid; }

.glitch__base {
  background: linear-gradient(90deg, $color, $subject-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hue-jump $duration $easing infinite;
}

// clip-path 로 조각내 밀어내는 대신, 가로줄 mask 를 뚝뚝 끊어 옮겨 스캔라인이 깨지는 것처럼 보이게 한다
.glitch__r, .glitch__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);
}
.glitch__r { color: $color;        animation: mask-jump-r $duration $easing infinite; }
.glitch__b { color: $subject-blue; animation: mask-jump-b $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; }
}
@keyframes mask-jump-b {
  0%, 60%, 100% { -webkit-mask-position: 0 0;    mask-position: 0 0;    opacity: 0; }
  65%, 75%      { -webkit-mask-position: 0 -3px; mask-position: 0 -3px; opacity: .9; }
}
@keyframes hue-jump {
  0%, 48%, 52%, 100% { filter: hue-rotate(0deg); }
  50%                { filter: hue-rotate(35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch__base { animation: none; }
  .glitch__r, .glitch__b { animation: none; opacity: 0; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.glitch {
  position: relative;
  margin: 0;
  font-weight: 800;
  font-size: clamp(26px, 8.2vw, 42px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
}

.glitch__base, .glitch__r, .glitch__b {
  display: block;
  grid-area: 1/1;
}

.glitch {
  display: grid;
}

.glitch__base {
  background: linear-gradient(90deg, #c2361a, #2f6df6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hue-jump 2s steps(2, jump-none) infinite;
}

.glitch__r, .glitch__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);
}

.glitch__r {
  color: #c2361a;
  animation: mask-jump-r 2s steps(2, jump-none) infinite;
}

.glitch__b {
  color: #2f6df6;
  animation: mask-jump-b 2s steps(2, jump-none) 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: 0.9;
  }
}
@keyframes mask-jump-b {
  0%, 60%, 100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    opacity: 0;
  }
  65%, 75% {
    -webkit-mask-position: 0 -3px;
    mask-position: 0 -3px;
    opacity: 0.9;
  }
}
@keyframes hue-jump {
  0%, 48%, 52%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(35deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .glitch__base {
    animation: none;
  }
  .glitch__r, .glitch__b {
    animation: none;
    opacity: 0;
  }
}

import type { CSSProperties } from "react";
import styles from "./GlitchText.module.scss";

export type GlitchTextProps = {
  text: string;
  /** 스캔라인이 어긋났다 돌아오는 한 주기 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 어긋나는 레이어 한쪽 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function GlitchText({
  text,
  duration = 2000,
  easing = "steps(2, jump-none)",
  color = "#c2361a",
}: GlitchTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <h1 className={styles.glitch} style={vars}>
      <span className={styles.base}>{text}</span>
      <span className={styles.r} aria-hidden="true">{text}</span>
      <span className={styles.b} aria-hidden="true">{text}</span>
    </h1>
  );
}

新しいタブで開く

05 · グリッチ文字 — 計測累積面積 2.345% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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をゆったり動かすと、クロームの表面を反射光が通り過ぎる質感になります。

どこで使うか

ゲーム・スポーツブランドのロゴタイプやタイトルロゴに向いています。

<main class="stage">
  <h1 class="chrome">レーシングチャンピオン</h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 반사광이 표면을 한 번 훑는 시간
$easing: $ease-out;
$color: $subject-ink;                               // 가장 어두운 밴드 색

@include stage($stage-yellow);

.chrome {
  margin: 0;
  font-weight: 900; font-size: clamp(28px, 8.8vw, 46px); line-height: 1.2; font-family: inherit;
  text-align: center;
  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;
  -webkit-text-fill-color: transparent;
  animation: reflect $duration $easing infinite;
}

@keyframes reflect {
  0%   { background-position: 100% 50%; }
  100% { background-position: -20% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .chrome { animation: none; background-position: 40% 50%; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.chrome {
  margin: 0;
  font-weight: 900;
  font-size: clamp(28px, 8.8vw, 46px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(100deg, #17141a 0%, #ffffff 12%, #17141a 24%, #fff7e6 40%, #ffffff 52%, #17141a 64%, #ffffff 80%, #17141a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: reflect 2s ease-out infinite;
}

@keyframes reflect {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -20% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chrome {
    animation: none;
    background-position: 40% 50%;
  }
}

import type { CSSProperties } from "react";
import styles from "./ChromeMetalText.module.scss";

export type ChromeMetalTextProps = {
  text: string;
  /** 반사광이 표면을 한 번 훑는 시간 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 가장 어두운 밴드 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function ChromeMetalText({
  text,
  duration = 2000,
  easing = "ease-out",
  color = "#17141a",
}: ChromeMetalTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return <h1 className={styles.chrome} style={vars}>{text}</h1>;
}

新しいタブで開く

06 · クロームメタル文字 — 計測累積面積 3.683% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

다중 스톱 그러데이션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を短く往復させます。ネオン1本が丸ごと消えて点くのではなく、古い電球マーキー看板のように文字ごとに別々に点滅します。

どこで使うか

劇場マーキー風タイトルやライブイベントバナーに向いています。

<main class="stage">
  <h1 class="marquee">
    <span style="--i:0">ラ</span><span style="--i:1">イ</span><span style="--i:2">ブ</span><span class="marquee__gap" aria-hidden="true"></span><span style="--i:3">スター</span><span style="--i:4">ト</span>
  </h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 전구 하나가 어두워졌다 돌아오는 한 주기
$easing: linear;
$color: $subject-cream;                             // 전구 색

@include stage($stage-orange);

.marquee {
  margin: 0;
  font-weight: 800; font-size: clamp(28px, 9vw, 46px); line-height: 1.2; font-family: inherit;
  text-align: center;
}
.marquee span {
  display: inline-block;
  color: $color;
  animation: bulb $duration $easing infinite;
  animation-delay: calc(var(--i, 0) * 120ms);       // 글자마다 지연이 달라 하나씩 따로 깜빡인다
}
.marquee__gap { width: .3em; }

@keyframes bulb {
  0%, 40%, 100% { opacity: 1; }
  47%           { opacity: .22; }                    // 통째로 꺼지는 네온과 달리 글자 하나만 잠깐 어두워진다
  54%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee span { animation: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.marquee {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 9vw, 46px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
}

.marquee span {
  display: inline-block;
  color: #fff7e6;
  animation: bulb 2s linear infinite;
  animation-delay: calc(var(--i, 0) * 120ms);
}

.marquee__gap {
  width: 0.3em;
}

@keyframes bulb {
  0%, 40%, 100% {
    opacity: 1;
  }
  47% {
    opacity: 0.22;
  }
  54% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation: none;
  }
}

import type { CSSProperties } from "react";
import styles from "./FlickerText.module.scss";

export type FlickerTextProps = {
  /** 글자를 하나씩 나눠 넣는다 (공백은 별도 span 으로) */
  letters: string[];
  /** 전구 하나가 어두워졌다 돌아오는 한 주기 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 전구 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type LetterVars = CSSProperties & { "--i"?: number };

export default function FlickerText({
  letters,
  duration = 2000,
  easing = "linear",
  color = "#fff7e6",
}: FlickerTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return (
    <h1 className={styles.marquee} style={vars}>
      {letters.map((ch, i) =>
        ch === " " ? (
          <span key={i} className={styles.gap} aria-hidden="true" />
        ) : (
          <span key={i} style={{ "--i": i } as LetterVars}>{ch}</span>
        )
      )}
    </h1>
  );
}

新しいタブで開く

07 · 点滅文字 — 計測累積面積 2.881% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

--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()の半径を大小させると、輪郭のまわりに光が呼吸するようににじみます。

どこで使うか

ダークモードCTAの見出しやカードバッジのアウトラインに向いています。

<main class="stage">
  <h1 class="outline">無料で体験する</h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 빛이 커졌다 작아지는 숨쉬기 한 주기
$easing: $ease-spring;
$color: $subject-blue;                              // 윤곽선·빛 색

@include stage($stage-paper);

.outline {
  margin: 0;
  font-weight: 900; font-size: clamp(28px, 8.8vw, 46px); line-height: 1.2; font-family: inherit;
  text-align: center;
  color: transparent;                                 // 속을 비워 윤곽선만 남긴다
  -webkit-text-stroke: 2px $color;
  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)); }
}

@media (prefers-reduced-motion: reduce) {
  .outline { animation: none; filter: drop-shadow(0 0 10px rgba($color, .7)); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.outline {
  margin: 0;
  font-weight: 900;
  font-size: clamp(28px, 8.8vw, 46px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px #2f6df6;
  text-stroke: 2px #2f6df6;
  animation: glow 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(47, 109, 246, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(47, 109, 246, 0.9)) drop-shadow(0 0 26px rgba(47, 109, 246, 0.5));
  }
}
@media (prefers-reduced-motion: reduce) {
  .outline {
    animation: none;
    filter: drop-shadow(0 0 10px rgba(47, 109, 246, 0.7));
  }
}

import type { CSSProperties } from "react";
import styles from "./OutlineGlowText.module.scss";

export type OutlineGlowTextProps = {
  text: string;
  /** 빛이 커졌다 작아지는 숨쉬기 한 주기 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 윤곽선·빛 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function OutlineGlowText({
  text,
  duration = 2000,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: OutlineGlowTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return <h1 className={styles.outline} style={vars}>{text}</h1>;
}

新しいタブで開く

08 · アウトライングロー — 計測累積面積 15.976% · 動いたフレーム 7/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

-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へ回し続けると、色相環全体が巡回して見えます。

どこで使うか

遊び心のあるブランドロゴやフェス・イベントタイトルに向いています。

<main class="stage">
  <h1 class="rainbow">フェスティバル開幕</h1>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;                              // 색상환이 360도 한 바퀴 도는 시간
$easing: linear;
$color: $subject-blue;                              // 그러데이션의 시작 색

@include stage($stage-ink);

.rainbow {
  margin: 0;
  font-weight: 800; font-size: clamp(28px, 8.6vw, 46px); line-height: 1.2; font-family: inherit;
  text-align: center;
  background: linear-gradient(90deg, $color, $stage-yellow, $stage-orange, $error, $subject-cream, $color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hue-cycle $duration $easing infinite;    // 위치가 아니라 색상환 자체를 돌린다
}

@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rainbow { animation: none; filter: hue-rotate(0deg); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.rainbow {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 8.6vw, 46px);
  line-height: 1.2;
  font-family: inherit;
  text-align: center;
  background: linear-gradient(90deg, #2f6df6, #ffd23f, #ff4d1f, #c2361a, #fff7e6, #2f6df6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: hue-cycle 2s linear infinite;
}

@keyframes hue-cycle {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rainbow {
    animation: none;
    filter: hue-rotate(0deg);
  }
}

import type { CSSProperties } from "react";
import styles from "./RainbowText.module.scss";

export type RainbowTextProps = {
  text: string;
  /** 색상환이 360도 한 바퀴 도는 시간 (기본 2000ms) */
  duration?: number;
  easing?: string;
  /** 그러데이션 시작 색 */
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

export default function RainbowText({
  text,
  duration = 2000,
  easing = "linear",
  color = "#2f6df6",
}: RainbowTextProps) {
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  return <h1 className={styles.rainbow} style={vars}>{text}</h1>;
}

新しいタブで開く

09 · 虹色文字 — 計測累積面積 4.147% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

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); }
}

どこで壊れるか — 接頭辞とアイソレーション

接頭辞が要る理由

01・02・03・04・05・06・09の七つが使うbackground-clip:textは、長らく接頭辞が必要だったプロパティです。caniuseのbackground-clip-text対応表によれば、Chrome・Edgeは120以降、Safariは15.5以降で接頭辞なしのまま動き、それより前のバージョンでは-webkit-background-clip:textがないと文字がグラデーションで塗られません。だからこの7本すべてで、接頭辞ありと接頭辞なしの宣言を並べて書いています。05が使うmask-imageも接頭辞つきの時期が長いプロパティで、接頭辞なしで動くのはChrome・Edgeが120以降、Safariが15.4以降、Firefoxが53以降です。だから05では-webkit-mask-imageと-webkit-mask-positionも接頭辞なしの宣言と並べて書いています。

後光が消える理由

03のisolation:isolateは別の理由で必要です。後光のレイヤー(z-index:-1)が親の重なりの文脈からはみ出すと、舞台の背景色の下に完全に隠れてしまうため、isolation:isolateで新しい重なりの文脈をその場に作っています。

@property がないと回らない

02の@propertyは対応の幅がさらに狭く、MDNの@propertyのページを見るとChrome・Edgeは85以降、Safariは16.4以降で使えるものの、Firefoxが正式に対応したのは128からです。@propertyがない古いブラウザでは角度の値が補間されないため、グラデーションは回転せず止まって見えますが、レイアウト自体は崩れません。実運用では静止した状態を基準に考え、回転はおまけとして扱うのが安全です。06のクロームメタル文字をページ全体まで広げたクロームとホログラフィックのLPパーツでも、基準は止まった金属の質感で、回転はやはりおまけの扱いにしています。ここまで計測しながら直した9本のzipを開く合言葉は5hzhmkcbで、下のカードから取り出せます。

アクセシビリティ

動きを減らす設定では

9つともprefers-reduced-motion: reduceでアニメーションが止まりますが、要素そのものは消えません。背景位置を動かす01・04・06は帯の途中で止まり、02は角度が45degに固定されてグラデーションが回転しない状態で残ります。03の後光と08の輪郭グローは呼吸を止め、一定の柔らかさのまま光り続けます。05のグリッチは色ずれ用の2枚のレイヤーだけが消え、下地の一枚だけが静止した文字として残ります。07の点滅は全文字が同じ明るさで止まり、09の色相環はhue-rotate(0deg)に戻って固定され、虹色の多色グラデーションが巡回せず静止した状態で残ります。

コントラストへの配慮

background-clip: textで文字の中身を透明にする効果は色弱や低彩度モニターだとコントラストが弱く見えることがあるので、実運用の見出しにはこの効果だけに頼らず近くに通常のテキストやアイコンも添えるのを勧めます。prefers-reduced-motion自体はMDNのドキュメントにまとまっています。

@media (prefers-reduced-motion: reduce) {
  .flow, .chrome { animation: none; background-position: 40% 50%; }
  .spin { animation: none; --angle: 45deg; }
  .neon::before { animation: none; filter: blur(10px); opacity: .85; }
  .light { animation: none; background-position: 50% 50%; }
  .r, .b { animation: none; opacity: 0; }
  .marquee span { animation: none; }
  .outline { animation: none; filter: drop-shadow(0 0 10px rgba($color, .7)); }
  .rainbow { animation: none; filter: hue-rotate(0deg); }
}

文字のグラデーションやシャイン以外のCSSアニメーションはCSSカテゴリー一覧に集めていて、このサイトが何を基準にデモを選んでいるかは紹介ページに書いています。

FAQ

css テキストカラーグラデーションに-webkit-の接頭辞はまだ必要ですか？

訪問者の大半はすでにChrome 120・Safari 15.5以降を使っているため、接頭辞なしのbackground-clip: textだけでも十分です。ただし接頭辞を一緒に書くコストはほぼなく、古いブラウザでは接頭辞がないとグラデーションどころか文字ごと見えなくなることもあるので、background-clip: textを使う7本すべてに接頭辞を残しています。

09の虹色テキストは色覚特性のある人にどう見えますか？

色相環を巡回させる効果なので、特定の2色の区別が難しい人にも「色が変わり続けている」こと自体は伝わります。ただし色の違いで成功・失敗のような意味を伝える用途には使わず、装飾的なタイトルだけに使うことを勧めます。

9つを1つの見出しに重ねて使ってもいいですか？

技術的には可能ですが勧めません。background-clip: textとfilter: blur()・mask-imageを同時に何層も重ねると、ブラウザが毎フレーム描き直すレイヤーが増え、非力なモバイル端末ではまずカクつきが目立ちます。見出し1つには9つのうち1つだけを選ぶことを勧めます。色数を減らしたくない場合は、文字ではなく枠のほうへ動きを移すCSS 枠線アニメーションに置き換えるとレイヤーが増えません。

CSS テキスト グラデーション アニメーション 9選 — 一行でコピペOK

01流れるグラデーション文字

css グラデーション テキスト の流し方

どこで使うか

02グラデーション角度移動

どう動くか

どこで使うか

03ネオングロー文字

どう動くか

どこで使うか

04光沢スイープ文字

どう動くか

どこで使うか

05グリッチ文字

どう動くか

どこで使うか

06クロームメタル文字

どう動くか

どこで使うか

07点滅文字

どう動くか

どこで使うか

08アウトライングロー

どう動くか

どこで使うか

09虹色文字

どう動くか

どこで使うか

どこで壊れるか — 接頭辞とアイソレーション

接頭辞が要る理由

後光が消える理由

@property がないと回らない

アクセシビリティ

動きを減らす設定では

コントラストへの配慮

FAQ

css テキスト カラー グラデーション に-webkit-の接頭辞はまだ必要ですか？

09の虹色テキストは色覚特性のある人にどう見えますか？

9つを1つの見出しに重ねて使ってもいいですか？

こんな記事もどうぞ

CSS テキストグラデーションアニメーション 9選 — 一行でコピペOK

css グラデーションテキストの流し方

css テキストカラーグラデーションに-webkit-の接頭辞はまだ必要ですか？