もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

最近、グラデーションを背景にするサイトが増えていますが、グラデーションは「背景」から「体験（インタラクション要素）」へ進化したとも言えます。単なる見た目の話ではなく、「色をどう“振る舞わせるか”」という設計の話に進化しているようです。
ここでは、動的なグラデーションを実装する方法や、グラデーションジェネレーターについて解説します。

従来（〜2022）の静的グラデーション

従来のグラデーションは固定された色の遷移であり、主に背景装飾のためにありました。これは視覚的なアクセントやフラットUIからくる単調さの回避という目的がありました。しかし、差別化しにくい、UIとしては受動的という側面もありました。

background: linear-gradient(90deg, #ff7e5f, #feb47b);

2024年、現在の動的グラデーション

時間・操作・環境に応じて変化するグラデーション。アニメーションやユーザーの行動に連動したものなど、UXに直接関与するパーツと本質的に変化しました。

アニメーション型

時間変化によりゆっくり動くグラデーション背景。

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

.bg {
  background: linear-gradient(270deg, #ff7e5f, #6a11cb, #2575fc);
  background-size: 600% 600%;
  animation: gradientMove 8s ease infinite;
}

インタラクション型（ユーザー連動）

マウス位置で変化したり、スクロールで色が変わるグラデーションであり、UXに貢献するものです。

ノイズ＋グラデーション

グラデーションに微細なノイズテクスチャ追加し、バンディングを防止したり、より自然な質感をもたらす効果があります。

メッシュグラデーション

複数の色が有機的に混ざり合うグラデーションで、従来の直線的なイメージから、有機的・流体的なグラデーションに変化しています。

ライトの表現

ネオンやグローで発光効果、ブラーと組み合わせた表現で感情的な魅力を増幅。Glassmorphismとの相性が良い効果です。

CSSによるグラデーションの実装例

グラデーション＋疑似ノイズ（DEMO）

CSSだけで完結する軽量版

body {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  position: relative;
}

/* ノイズレイヤー */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      rgba(255,255,255,0.03) 0,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 3px
    );

  opacity: 0.3;
}

多層グラデーション＋ノイズ（DEMO）

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;

  background:
    radial-gradient(circle at 20% 30%, #ff7e5f, transparent 40%),
    radial-gradient(circle at 80% 70%, #6a11cb, transparent 40%),
    linear-gradient(135deg, #1e3c72, #2a5298);
}

/* ノイズ */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 2px
    );

  mix-blend-mode: overlay;
  opacity: 0.4;
}

動くグラデーション＋ノイズ（DEMO）

.hero {
  height: 100vh;
  background: linear-gradient(270deg, #ff7e5f, #6a11cb, #2575fc);
  background-size: 600% 600%;
  animation: gradientMove 12s ease infinite;
  position: relative;
}

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

/* ノイズ */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-radial-gradient(
      circle,
      rgba(255,255,255,0.04) 0,
      rgba(255,255,255,0.04) 1px,
      transparent 1px,
      transparent 4px
    );

  opacity: 0.25;
}

主なグラデーションジェネレーター

Noise Gradient Generator

「今っぽい質感」を一番簡単に作れるジェネレータです。organic / radial / conic対応し、ノイズ種類（fine / film / scanline など）も選べ、CSSコピーもできます。

Better Gradient

メッシュグラデーションが生成できます。blurを調整することで“あの感じ”出せるジェネレーターです。デザイン案件レベルで使え、PNG / SVG / CSS出力に対応しています。

Gradient Generator

ノイズ・ブラー・メッシュ全部入りで、4K書き出しが可能なジェネレータです。ヒーロー画像・LPなどの用途に向いていて、ノイズ強度を細かく制御できます。

GradientHub Mesh Generator

ノイズレイヤー＋ブレンドモードが選択できるジェネレーターです。CSS生成もかなり実用的で、Tailwindにも対応しています。