最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？

Post on:2021年9月22日

はじめに

DribbbleやBehanceを見ていると、デザイナーが画像に質感を与えるためにノイズというシンプルなテクニックを使っているのがわかります。ノイズを加えることで、単色またはシャドウなどの滑らかなグラデーションをよりリアルに表現することができます。デザイナーは質感を好むにもかかわらず、Webデザインでノイズが使用されることはあまりありませんでした。

しかし、現在ではCSSとSVGでこのノイズを簡単に実装できます。この記事では、少ない量のCSSとSVGでグラデーションに質感を与えるノイズを実装する方法を解説します。では、さっそくノイズを作成してみましょう！

Illustration by Hank Washington on Behance

Illustration by Jordan Kay on Dribbble

ノイズを加えたグラデーションを生成できるオンラインツール

ノイズを加えたグラデーションを生成できるオンラインツールがあります。何が起きているのかを理解するには、レイヤーを構成するパラメーターを操作するのが一番手っ取り早いでしょう。

Grainy Gradients playground

実装: SVGノイズとCSSグラデーション

SVGノイズとCSSグラデーションを重ねる

この記事の核となるテクニックは、Chris Pachlによる質問（CSSグラデーションにノイズを追加できますか？）の回答をもとに構築されています。
参考: Can you add noise to a CSS gradient?

実装のポイントは、SVGフィルタでノイズを作成し、そのノイズを背景として適用することです。それをグラデーションの下に重ねて、明るさとコントラストを上げれば、徐々に消えていくグラデーションができあがります。

重要なポイント

何が行われているのかは次のとおりです。

SVGのturbulence: これはノイズフィルタです。
グラデーションとSVGによる背景: 次に、そのフィルタをCSSのグラデーションと組み合わせた背景画像としてCSSに落とし込みます。
明るさとコントラストを高める: 続いて、CSSフィルタでノイズの明るさとコントラストを上げます。
グラデーションをブレンド: 最後に、オプションでミックスブレンドモードを使用して、カラーをフィルタリングし、グラデーションをブレンドします。

それぞれの実装方法を詳しく解説します。

SVGのturbulenceを使用する

SVGの世界ではフィルタを定義することができ、その一つとしてパーリンノイズを作成できます。これは<feTurbulence>と呼ばれ、「乱流」または「ノイズ」か、どれくらい細かいか粗いかなどの属性を定義できます。Bence Szabóはこのフィルタを使ってパターンを作成する方法を記事で詳しく解説しています。

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch' />
  </filter>

  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

<feTurbulence

type='fractalNoise'

baseFrequency='0.65'

numOctaves='3'

stitchTiles='stitch' />

</filter>

</svg>

このSVGはフィルタを作成し、粒子の粗いグラデーションに使用できる<rect>要素をレンダリングします。SVGの<filter>は<rect>とは別に定義されており、<rect>は単にそれを参照しているだけであることに注意してください。

下記のデモで<feTurbulence>のプロパティの値を変更してみてください。

See the Pen
SVG for CSS noise gradient by Jimmy Chion (@cjimmy)
on CodePen.

ノイズのSVGが完成したら、別ファイルとして保存します。この記事ではSVGを取得するために外部リンクを参照しています。しかし、実際にはローカルファイルや独自のCDNを参照することになります。CSSでSVGをidで参照するのはちょっとした理由でうまくいきませんが、この記事にあるデモのようにSVGをインライン化することができます。読みやすさを配慮して、デモではしません。

SVGとグラデーションを使用してCSS背景を作成する

作成したSVGフィルタをURLやパスで参照できる場所に保存したら、SVGとグラデーションを組み合わせてCSSのbackgroundに使用します。

.noise {
  /* ... */
  background:
    linear-gradient(to right, blue, transparent),
    url(https://grainy-gradients.vercel.app/noise.svg);
}

.noise {

/* ... */

background:

linear-gradient(to right, blue, transparent),

url(https://grainy-gradients.vercel.app/noise.svg);

}

このCSSでは、順序が重要です。
ここでは単色（つまりノイズなし）をノイズに変化させてから別のカラーに変化させます。また、ノイズが透けて見えるように、グラデーションの一方の端を透明にします。

下記のようなグラデーションが実装されます。

See the Pen
CSS Noise gradient, step 2 by Jimmy Chion (@cjimmy)
on CodePen.

しかし、これはノイズが混ざりすぎていて、あまりいい感じではありません。粒子を粗くする必要があります。そのためには、次で解説します。

明るさとコントラストを高める

CSSフィルタを追加すると、ノイズがより鮮明になり、最も色あせたカラーがホワイトやブラックに向かって押し出されます。このフィルタは<div>全体に適用されるので、左端のブルーは最初に定義したブルーとは異なるブルーになります。

.noise {
  /* ... */
  background: 
    linear-gradient(to right, blue, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg);
  filter: contrast(170%) brightness(1000%);  
}

.noise {

/* ... */

background:

linear-gradient(to right, blue, transparent),

url(https://grainy-gradients.vercel.app/noise.svg);

filter: contrast(170%) brightness(1000%);

}

コントラストと明るさがグラデーションにどのように影響するかを試してみましょう。明るさとコントラストを上げると、下記のデモでは濁ったグレーが押し出されます。

See the Pen
Grainy Gradient, step 3 by Jimmy Chion (@cjimmy)
on CodePen.

ノイズのカラーが均一でない

ノイズを拡大してみると、ノイズが多くのカラーで構成されていることがわかります。SVGフィルタはそもそもカラフルで、明るさとコントラストを上げると特定のカラーが強調されてしまいます。ほとんど目立ちませんが、この紙吹雪を歓迎しない場合は、CSSのブレンド（mix-blend-modeやbackground-blend-modeなど）でカラーをフィルタリングできます。

ノイズを拡大すると、いろいろなカラーが混ざっているのがわかる

CSSのブレンド機能

2つのカラー間を移行する粒状のグラデーションを作ってみましょう。
CSSのブレンド機能を使えば、カラーのレイヤーを重ねることができます。下記の例では、マークアップに別の<div>を追加して、元のグラデーションの上に配置し、mix-blend-mode: multiply;を適用して滑らかにしています。

<section>
  <div class="isolate">
    <div class="noise"></div>
    <div class="overlay"></div>
  </div>
</section>

</div>

</section>

.noise {
  /* ... */
  background: 
    linear-gradient(20deg, rebeccapurple, transparent), 
    url(https://grainy-gradients.vercel.app/noise.svg); 
  contrast(170%) brightness(1000%);
}
.overlay {
  /* ... */
  background: moccasin;
  mix-blend-mode: multiply;
}

.noise {

/* ... */

background:

linear-gradient(20deg, rebeccapurple, transparent),

url(https://grainy-gradients.vercel.app/noise.svg);

contrast(170%) brightness(1000%);

}

.overlay {

/* ... */

background: moccasin;

mix-blend-mode: multiply;

}

CSSのisolationプロパティで新しいスタッキングコンテキストを作成し、ブレンドされるものを選択できます。

/* Same as before */

.isolate {
  isolation: isolate;
  /* ... */
}

/* Same as before */

.isolate {

isolation: isolate;

/* ... */

}

isolationを省略した場合、グラデーションとオーバーレイは背景色とブレンドされます。デモで、その行をコメントアウトしてみてください。

See the Pen
Grainy Gradient, two colors by Jimmy Chion (@cjimmy)
on CodePen.

粒子の粗いグラデーションの使用例

ノイズが多く、粒子の粗いグラデーションを実装する方法を見てきました。では、どのような場面で使用するのでしょうか？
いくつか使用例を見てましょう。

ライトとシャドウ、with 粒子

グラデーションが自然に発生する場所はどこでしょうか？例えば、ライトとシャドウに発生します。CSSのmix-blend-modeプロパティを利用して、グラデーションをスムーズにブレンドしたり、ノイズで見たいカラーを選択的にフィルタリングすることもできます。

See the Pen
CSS gradient (light) by Jimmy Chion (@cjimmy)
on CodePen.

粒子の粗いグラデーションをシャドウに使用する場合は、暗いグラデーションを作成し、ライトの例を反転させて効果を作成します。どちらの場合も、mix-blend-modeプロパティで他のグラデーションとブレンドすることができます。

See the Pen
CSS Noise Gradient (shadow) by Jimmy Chion (@cjimmy)
on CodePen.

ホログラムホイル

輝度とコントラストを大幅に向上させることで、ホログラムホイルのような虹色の効果を生み出します。

See the Pen
Holographic type by Jimmy Chion (@cjimmy)
on CodePen.

さらに詳しく

Grainy Gradients playgroundで、さまざまなパラメータがテクスチャにどのような影響を与えるかを試してみてください。

Grainy Gradients playground

さらに、このテクニックを使い続けるための方法をいくつか紹介します。

別のSVGを使用する: この記事で紹介しているグラデーションはすべて同じSVGを使用していますが、ノイズを生成するパラメータを調整することで、粗さや見た目を変更できます。
さまざまなグラデーションを試してみる: CSSにはlinear-gradient以外にも4種類のグラデーションがあります。
さらにレイヤーを追加する: CSSのブレンド機能では好きなだけレイヤーを重ねて、ブレンドすることができます。
さまざまなSVGフィルターを適用する: ガウスぼかしやさまざまな種類の照明など、あらゆる種類のフィルタが用意されています。しかも、それらはCSSのフィルタで参照でき、SVGだけでなくあらゆる要素に適用できます。

他にどんなことが考えられますか？
あなたの発見を、ぜひコメントで教えてください。

ブラウザのサポート

ブラウザのサポートの話をしないわけにはいきません。このテクニックの核心部分は、すべてのモダンブラウザでサポートされています。ご想像のとおり、IEでは動作しません。とはいえ、IEはCSSで背景としてSVGをサポートしています（ただし、CSSフィルタのプロパティではサポートされていません）。

CSSの背景画像としてのSVG

CSSフィルタのエフェクト

また、Blinkベースのブラウザ（Chromeなど）とWebKitベースのブラウザ（Safariなど）では、mix-blend-modeの実装が少し異なるため、CSSブレンドを使用する場合は、必ずブラウザ間でテストしてください。私自身のプロジェクトでは、ブラウザ固有のメディアクエリを使用して、CSSを少し調整するだけで視覚的な違いを手動で調整しています。

これで終わりです。
SVGフィルタを理解し、CSSフィルタをbackgroundに組み合わせることで、デザインに深みと質感を与える素敵な視覚効果が得られます。