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

粒子感（grain/noise）のあるグラデーションは、2026年のWebデザインでもかなり使われています。
特に「クリエイティブ系」「AI系」「モダンLP」などで「無機質すぎるフラットUI」を避けるためによく採用されています。実装方法はいくつかありますが、現在の実務では次の3パターンが主流です。ここでは、それぞれの実装方法を解説します。

CSSのみで作る

CSSだけで実装するのは、最も導入しやすい軽量で簡単な方法です。
特徴としてのメリット「画像不要」「軽量」「レスポンシブ対応簡単」「実装コスト低い」などが挙げられますが、「本物のフィルムグレイン感が弱い」「粒子が均一になりやすい」なデメリットもあります。

<div class="grain-bg"></div>

.grain-bg {
  position: relative;
  width: 100%;
  height: 100vh;

  background:
    radial-gradient(circle at top left, #7f5af0, transparent 40%),
    radial-gradient(circle at bottom right, #2cb67d, transparent 40%),
    linear-gradient(135deg, #16161a, #242629);

  overflow: hidden;
}

.grain-bg::before {
  content: "";
  position: absolute;
  inset: 0;

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

  opacity: 0.15;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

SVGノイズを重ねる

CSSのグラデーションにSVGのノイズ画像を重ねる方法です。昨今、特に多い実装方法です。
特徴として「粒子感が自然」「デザイン品質が高い」「実務投入しやすい」などのメリットが挙げられます。デメリットとしては「blend-modeによってはGPU負荷増」「古い端末で若干重い」などユーザー環境に配慮も必要です。

<div class="noise-bg"></div>

.noise-bg {
  position: relative;
  width: 100%;
  height: 100vh;

  background:
    linear-gradient(135deg, #6e45e2, #88d3ce);

  overflow: hidden;
}

.noise-bg::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");

  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Canvas/WebGLで実装

インタラクティブな「流体グラデーション」や「パーティクルアニメーション」などを実装する場合、Tree.jsやOGL、shaderなどの技術によって実装する必要がありますが、小規模なサイトではオーバースペックになりやすいことが良く見受けられます。

2026年っぽくするコツ

2021〜2023のネオン系より、彩度を少し落とした濁りのある色味が主流になっています。
そして、粒子感は薄く見せて粒子は動かしすぎないのがトレンドです。

トレンドを意識したグラデーション例

“`css
body {
margin: 0;
min-height: 100vh;

background:
radial-gradient(circle at 20% 20%, #8f5cff 0%, transparent 35%),
radial-gradient(circle at 80% 30%, #00c2a8 0%, transparent 35%),
radial-gradient(circle at 50% 80%, #ff7b54 0%, transparent 30%),
#0f1115;

position: relative;
overflow: hidden;
}

body::before {
content: “”;
position: fixed;
inset: 0;

background-image:
url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’160′ height=’160′ viewBox=’0 0 160 160’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.8′ numOctaves=’3’/%3E%3C/filter%3E%3Crect width=’160′ height=’160′ filter=’url(%23noise)’ opacity=’0.4’/%3E%3C/svg%3E”);

opacity: 0.12;

mix-blend-mode: soft-light;

pointer-events: none;
}

AIの普及とともに、AI疲れによる自然回帰の風潮があります。グラデーションのトーンを抑えて濁りを加えて粒子感を加えることで無機質感が払拭されます。