グラデーションテキスト

background-clip: text で文字をグラデーションに切り抜き、背景位置のアニメで色を流します。ヒーロー見出しやロゴに最適です。

#css#gradient#animation

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<div class="page">
  <header class="nav">
    <div class="brand">
      <span class="logo"></span>FlowDesk
    </div>
    <nav class="links">
      <a>機能</a><a>料金</a><a>導入事例</a>
      <a class="btn">無料で始める</a>
    </nav>
  </header>

  <section class="hero">
    <p class="eyebrow">CHANGE THE WAY TEAMS WORK</p>
    <h1 class="grad-title">
      <span class="grad-text">仕事を、流れるように。</span>
    </h1>
    <p class="lead">タスク・ドキュメント・対話をひとつに。<br>チームの生産性を、今日から加速させる。</p>
    <div class="cta">
      <a class="primary">14日間ためす</a>
      <a class="ghost">デモを見る</a>
    </div>
    <p class="note">クレジットカード不要・3分でセットアップ完了</p>
  </section>
</div>

CSS

/* FlowDesk SaaS ヒーロー：グラデクリップ見出しが主役 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(900px 400px at 80% -20%, #1b2f63 0%, transparent 60%),
    linear-gradient(160deg, #0f1b34 0%, #0c1428 100%);
  color: #e7ecf7;
  min-height: 400px;
  overflow: hidden;
}

.page { padding: 16px 26px; }

/* ナビ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.logo {
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(135deg, #4f7cff, #8ab4ff);
  box-shadow: 0 0 12px rgba(79,124,255,0.6);
}
.links { display: flex; align-items: center; gap: 18px; }
.links a {
  font-size: 13px; color: #aeb9d4; cursor: pointer;
}
.links a:hover { color: #fff; }
.links .btn {
  color: #fff; background: #4f7cff;
  padding: 7px 14px; border-radius: 8px; font-weight: 600;
}

/* ヒーロー */
.hero { text-align: center; padding: 30px 10px 16px; }
.eyebrow {
  font-size: 11px; letter-spacing: 0.32em; font-weight: 700;
  color: #6f86c2; margin-bottom: 12px;
}
.grad-title {
  font-size: clamp(34px, 7vw, 54px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
}
/* グラデーションを文字でクリップする本体 */
.grad-text {
  background: linear-gradient(100deg,
    #4f7cff 0%, #7aa2ff 30%, #b388ff 55%, #4f7cff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flow 6s linear infinite;
  filter: drop-shadow(0 6px 22px rgba(79,124,255,0.35));
}
@keyframes flow { to { background-position: 240% 0; } }

.lead {
  margin-top: 16px; font-size: 14px; line-height: 1.7;
  color: #aeb9d4;
}
.cta {
  margin-top: 22px;
  display: flex; gap: 12px; justify-content: center;
}
.primary, .ghost {
  padding: 11px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.primary {
  background: #4f7cff; color: #fff;
  box-shadow: 0 8px 24px rgba(79,124,255,0.4);
}
.primary:hover { background: #6a90ff; }
.ghost {
  border: 1px solid #2c3c63; color: #c9d4ec;
}
.ghost:hover { border-color: #4f7cff; }
.note { margin-top: 14px; font-size: 12px; color: #6f86c2; }

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

JavaScript

// CTAクリックでさざ波フィードバック（演出のみ）
(function () {
  const btns = document.querySelectorAll('.primary, .ghost, .btn');
  if (!btns.length) return; // null安全
  btns.forEach((b) => {
    b.addEventListener('click', () => {
      // 押下の手応えを一瞬の縮小で表現
      b.style.transform = 'scale(0.95)';
      setTimeout(() => { b.style.transform = ''; }, 130);
    });
  });
})();

コード

HTML

<main class="stage">
  <p class="eyebrow">GRADIENT TEXT</p>
  <h1 class="grad-title" aria-label="Aurora">
    <span class="grad-text">Aurora</span>
  </h1>
  <p class="grad-sub">background-clip: text で文字をグラデーションに</p>
</main>

CSS

/* 全体リセットと暗い背景 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 360px;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  /* 奥行きのある放射状グラデ背景 */
  background:
    radial-gradient(1200px 500px at 50% -10%, #1b2a4a 0%, transparent 60%),
    linear-gradient(160deg, #0a0e1a 0%, #11162a 100%);
  color: #fff;
  overflow: hidden;
}

.stage { text-align: center; padding: 24px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.5em;
  font-weight: 600;
  color: #6b7a9e;
  margin-bottom: 14px;
  padding-left: 0.5em; /* レタースペース分の視覚補正 */
}

.grad-title {
  font-size: clamp(56px, 14vw, 120px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* グラデーションを文字でクリップする本体 */
.grad-text {
  background: linear-gradient(
    100deg,
    #ff6ec4 0%, #7873f5 28%, #4ade80 55%, #38bdf8 80%, #ff6ec4 100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* グラデを横方向に流すアニメ */
  animation: flow 6s linear infinite;
  /* かすかな発光で立体感 */
  filter: drop-shadow(0 6px 24px rgba(120, 115, 245, 0.35));
}

@keyframes flow {
  to { background-position: 280% 0; }
}

.grad-sub {
  margin-top: 18px;
  font-size: 14px;
  color: #9aa7c7;
  letter-spacing: 0.04em;
}

/* モーション控えめ設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}

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

このままコピーしてAIに貼り付け「追加する場所」だけ書き換えればOK

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「グラデーションテキスト」の効果を追加してください。

# 追加してほしい効果
グラデーションテキスト（タイポグラフィ）
background-clip: text で文字をグラデーションに切り抜き、背景位置のアニメで色を流します。ヒーロー見出しやロゴに最適です。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<main class="stage">
  <p class="eyebrow">GRADIENT TEXT</p>
  <h1 class="grad-title" aria-label="Aurora">
    <span class="grad-text">Aurora</span>
  </h1>
  <p class="grad-sub">background-clip: text で文字をグラデーションに</p>
</main>

【CSS】
/* 全体リセットと暗い背景 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 360px;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  /* 奥行きのある放射状グラデ背景 */
  background:
    radial-gradient(1200px 500px at 50% -10%, #1b2a4a 0%, transparent 60%),
    linear-gradient(160deg, #0a0e1a 0%, #11162a 100%);
  color: #fff;
  overflow: hidden;
}

.stage { text-align: center; padding: 24px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.5em;
  font-weight: 600;
  color: #6b7a9e;
  margin-bottom: 14px;
  padding-left: 0.5em; /* レタースペース分の視覚補正 */
}

.grad-title {
  font-size: clamp(56px, 14vw, 120px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* グラデーションを文字でクリップする本体 */
.grad-text {
  background: linear-gradient(
    100deg,
    #ff6ec4 0%, #7873f5 28%, #4ade80 55%, #38bdf8 80%, #ff6ec4 100%
  );
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* グラデを横方向に流すアニメ */
  animation: flow 6s linear infinite;
  /* かすかな発光で立体感 */
  filter: drop-shadow(0 6px 24px rgba(120, 115, 245, 0.35));
}

@keyframes flow {
  to { background-position: 280% 0; }
}

.grad-sub {
  margin-top: 18px;
  font-size: 14px;
  color: #9aa7c7;
  letter-spacing: 0.04em;
}

/* モーション控えめ設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
}

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

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。

ライブデモ

使用例（お題: SaaS FlowDesk）

コード

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

同じカテゴリの技法