Web Design Lab ← ギャラリーへ
SVG エフェクト 初級

グラデーションテキスト(流動)

linearGradientをSVGのanimateで横移動させ、見出しに流れる色とアウトライン描画を与えます。タイトルの主役に。

#svg#gradient#css#typography

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML 
<!-- Sakura：新曲MVのタイトルカード。流れるグラデーションテキストが主役 -->
<section class="sk-mv">
  <div class="sk-mv__bg" aria-hidden="true"></div>
  <span class="sk-petal sk-petal--1" aria-hidden="true"></span>
  <span class="sk-petal sk-petal--2" aria-hidden="true"></span>
  <span class="sk-petal sk-petal--3" aria-hidden="true"></span>

  <div class="sk-mv__inner">
    <span class="sk-mv__eyebrow">NEW SINGLE ・ 2026.4.18 RELEASE</span>

    <!-- 主役：linearGradientをanimateで流す見出し -->
    <svg class="sk-grad" viewBox="0 0 600 150" role="img" aria-label="流れるグラデーションの楽曲タイトル">
      <defs>
        <linearGradient id="skFlow" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%"  stop-color="#ff9ec4" />
          <stop offset="35%" stop-color="#ffd1e0" />
          <stop offset="70%" stop-color="#ff6fa3" />
          <stop offset="100%" stop-color="#ff9ec4" />
          <animate attributeName="x1" values="0;1;0" dur="6s" repeatCount="indefinite" />
          <animate attributeName="x2" values="1;2;1" dur="6s" repeatCount="indefinite" />
        </linearGradient>
        <linearGradient id="skFlow2" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#ff6fa3" />
          <stop offset="100%" stop-color="#fff" />
        </linearGradient>
      </defs>
      <text x="300" y="78" class="sk-fill" text-anchor="middle">SAKURA</text>
      <text x="300" y="78" class="sk-stroke" text-anchor="middle">SAKURA</text>
      <text x="300" y="124" class="sk-sub" text-anchor="middle">はなびらの約束</text>
    </svg>

    <a class="sk-mv__btn" href="#">MVを観る ▶</a>
  </div>
</section>
CSS 
/* Sakura：新曲MVタイトルカード（流れるグラデーションテキスト） */
:root {
  --pink: #ffd1e0;
  --pink-deep: #ff6fa3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 400px;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  overflow: hidden;
}

.sk-mv {
  position: relative;
  height: 400px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, var(--pink) 70%, #ffb3cf 100%);
}
/* 背景の淡い桜グロー */
.sk-mv__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(45% 55% at 22% 28%, rgba(255, 158, 196, 0.5), transparent 70%),
    radial-gradient(45% 55% at 80% 72%, rgba(255, 111, 163, 0.35), transparent 70%);
}

/* 舞う花びら */
.sk-petal {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 0 100% 0 100%;
  opacity: 0.85;
  filter: drop-shadow(0 2px 3px rgba(255, 111, 163, 0.4));
}
.sk-petal--1 { top: 16%; left: 14%; animation: skFloat 7s ease-in-out infinite; }
.sk-petal--2 { top: 64%; left: 80%; width: 18px; height: 18px; animation: skFloat 9s ease-in-out 1s infinite; }
.sk-petal--3 { top: 30%; left: 84%; width: 10px; height: 10px; animation: skFloat 6s ease-in-out 0.5s infinite; }
@keyframes skFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(25deg); }
}

.sk-mv__inner { position: relative; z-index: 2; width: min(94%, 600px); }
.sk-mv__eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: var(--pink-deep);
  margin-bottom: 4px;
}

.sk-grad { width: 100%; height: auto; display: block; }
.sk-fill, .sk-stroke {
  font-family: "Arial Black", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 900;
  font-size: 72px;
  letter-spacing: 3px;
}
/* グラデで塗りつぶした本体 */
.sk-fill { fill: url(#skFlow); }
/* 上に重ねたアウトラインを描画 */
.sk-stroke {
  fill: none;
  stroke: url(#skFlow2);
  stroke-width: 1.2;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: skTrace 4s ease forwards;
  opacity: 0.9;
}
.sk-sub {
  fill: #8a5a6e;
  font-size: 19px;
  letter-spacing: 6px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
@keyframes skTrace { to { stroke-dashoffset: 0; } }

.sk-mv__btn {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--pink-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(255, 111, 163, 0.45);
  transition: transform 0.2s;
}
.sk-mv__btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .sk-stroke { animation: none; stroke-dashoffset: 0; }
  .sk-petal { animation: none; }
  .sk-mv__btn { transition: none; }
}
JavaScript 
// グラデの流れと描画はSVG<animate>＋CSSで完結するためJSロジックは不要。
// reduced-motion時に<animate>を止め、静止したグラデーションで見せる。
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

if (reduce) {
  document.querySelectorAll("#skFlow animate").forEach((a) => {
    if (typeof a.beginElement === "function") {
      try { a.endElement(); } catch (e) { /* 古い実装は無視 */ }
    }
  });
}

コード

HTML 
<!-- SVGグラデーションテキスト: linearGradient+animateで流れる色のタイトル -->
<div class="text-stage">
  <svg class="grad-text" viewBox="0 0 600 180" role="img" aria-label="グラデーションが流れる見出し">
    <defs>
      <linearGradient id="flow" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%"  stop-color="#22d3ee" />
        <stop offset="35%" stop-color="#a78bfa" />
        <stop offset="70%" stop-color="#f472b6" />
        <stop offset="100%" stop-color="#22d3ee" />
        <!-- グラデを横にスライドさせて流れを作る -->
        <animate attributeName="x1" values="0;1;0" dur="6s" repeatCount="indefinite" />
        <animate attributeName="x2" values="1;2;1" dur="6s" repeatCount="indefinite" />
      </linearGradient>
      <!-- なぞり描き用のアウトライン色 -->
      <linearGradient id="flow2" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#f472b6" />
        <stop offset="100%" stop-color="#22d3ee" />
      </linearGradient>
    </defs>

    <text x="300" y="78" class="t-fill" text-anchor="middle">CREATIVE</text>
    <text x="300" y="78" class="t-stroke" text-anchor="middle">CREATIVE</text>
    <text x="300" y="140" class="t-sub" text-anchor="middle">svg gradient motion</text>
  </svg>
</div>
CSS 
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #05060f;
  /* 背景に控えめなグロー */
  background-image:
    radial-gradient(50% 60% at 25% 30%, rgba(34, 211, 238, .15), transparent 70%),
    radial-gradient(50% 60% at 75% 70%, rgba(244, 114, 182, .15), transparent 70%);
  overflow: hidden;
}
.text-stage { width: min(94%, 620px); }
.grad-text { width: 100%; height: auto; display: block; }

.t-fill, .t-stroke {
  font-family: "Segoe UI", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: 76px;
  letter-spacing: 4px;
}
/* グラデで塗りつぶした本体 */
.t-fill {
  fill: url(#flow);
}
/* 上に重ねたアウトラインを描画していく */
.t-stroke {
  fill: none;
  stroke: url(#flow2);
  stroke-width: 1.2;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: trace 4s ease forwards;
  opacity: .9;
}
.t-sub {
  fill: #94a3b8;
  font-size: 20px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

@keyframes trace { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-stroke { animation: none; stroke-dashoffset: 0; }
}
JavaScript 
// グラデーションのアニメーションはSVG<animate>とCSSで完結するためJSは不要です。

🤖 AIエージェント用プロンプト

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK
あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「グラデーションテキスト(流動)」の効果を追加してください。

# 追加してほしい効果
グラデーションテキスト(流動)（SVG エフェクト）
linearGradientをSVGのanimateで横移動させ、見出しに流れる色とアウトライン描画を与えます。タイトルの主役に。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- SVGグラデーションテキスト: linearGradient+animateで流れる色のタイトル -->
<div class="text-stage">
  <svg class="grad-text" viewBox="0 0 600 180" role="img" aria-label="グラデーションが流れる見出し">
    <defs>
      <linearGradient id="flow" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%"  stop-color="#22d3ee" />
        <stop offset="35%" stop-color="#a78bfa" />
        <stop offset="70%" stop-color="#f472b6" />
        <stop offset="100%" stop-color="#22d3ee" />
        <!-- グラデを横にスライドさせて流れを作る -->
        <animate attributeName="x1" values="0;1;0" dur="6s" repeatCount="indefinite" />
        <animate attributeName="x2" values="1;2;1" dur="6s" repeatCount="indefinite" />
      </linearGradient>
      <!-- なぞり描き用のアウトライン色 -->
      <linearGradient id="flow2" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#f472b6" />
        <stop offset="100%" stop-color="#22d3ee" />
      </linearGradient>
    </defs>

    <text x="300" y="78" class="t-fill" text-anchor="middle">CREATIVE</text>
    <text x="300" y="78" class="t-stroke" text-anchor="middle">CREATIVE</text>
    <text x="300" y="140" class="t-sub" text-anchor="middle">svg gradient motion</text>
  </svg>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #05060f;
  /* 背景に控えめなグロー */
  background-image:
    radial-gradient(50% 60% at 25% 30%, rgba(34, 211, 238, .15), transparent 70%),
    radial-gradient(50% 60% at 75% 70%, rgba(244, 114, 182, .15), transparent 70%);
  overflow: hidden;
}
.text-stage { width: min(94%, 620px); }
.grad-text { width: 100%; height: auto; display: block; }

.t-fill, .t-stroke {
  font-family: "Segoe UI", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: 76px;
  letter-spacing: 4px;
}
/* グラデで塗りつぶした本体 */
.t-fill {
  fill: url(#flow);
}
/* 上に重ねたアウトラインを描画していく */
.t-stroke {
  fill: none;
  stroke: url(#flow2);
  stroke-width: 1.2;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: trace 4s ease forwards;
  opacity: .9;
}
.t-sub {
  fill: #94a3b8;
  font-size: 20px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

@keyframes trace { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-stroke { animation: none; stroke-dashoffset: 0; }
}

【JavaScript】
// グラデーションのアニメーションはSVG<animate>とCSSで完結するためJSは不要です。

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。
SVG エフェクト
パスドローイング(手書きアニメ)
stroke-dasharrayとdashoffsetでSVGの線が描かれていく演出。グラフやロゴ、署名の登場アニメに使えます。
SVG エフェクト
SVGモーフィング(形状変形)
pathのd属性の頂点を線形補間して形を滑らかに変える技術。ライブラリ無しでブロブやハートへ連続変形します。
SVG エフェクト
グーフィルター(粘性融合)
feGaussianBlurとfeColorMatrixで要素同士が溶け合うメタボール表現。ローダーやメニュー展開の演出に最適です。
SVG エフェクト
波形セパレーター
速度の異なる波SVGを重ねて横スクロールさせ、セクションの境界を動的に区切ります。LPのヒーロー下端に好適。
SVG エフェクト
円形プログレスゲージ
円のstroke-dashoffsetで進捗を可視化し、中央の数値をカウントアップ。ダッシュボードやスキル表示に使えます。
SVG エフェクト
アニメーションアイコン
ホバーやクリックで状態が切り替わるSVGアイコン集(メニュー/いいね/完了/通知)。マイクロインタラクションに。
SVG エフェクト
液体ディストーション
feTurbulenceとfeDisplacementMapでノイズ歪みを与え、有機的にうねる液体表現を作るSVGフィルター。背景演出に。