ノイズ・グレインテクスチャジェネレーター
ノイズテクスチャジェネレーター
ノイズテクスチャジェネレーター：CSS背景用のSVGグレイン | We.Inc
SVGのfeTurbulenceでフィルムグレインや紙のようなノイズテクスチャを作成。周波数、オクターブ、シード、不透明度を設定してグラデーション上でプレビューし、SVGまたはCSSのデータURLをコピーできます。
ノイズテクスチャとは、単色やグラデーションの上に重ねるランダムな粒子のことで、デジタルではなく印刷物のような質感を与えます。ブラウザーでは画像ファイルなしで作れます。SVGのfeTurbulenceフィルターが、周波数、オクターブ数、シードからパーリンノイズを生成します。下で調整して、数百バイトのコードをコピーしてください。
feTurbulenceの属性（デフォルト値はMDNより）
- baseFrequency
- 粒子の大きさ。数値が大きいほど細かいグレインになります。1つの数値、またはxとyの個別の値
- numOctaves
- 重ねる細部のレイヤー数。多いほど豊かになり、処理は遅くなります
- fractalNoise（柔らかく雲のよう）またはturbulence（よりシャープで波打つ）
- ランダムなパターンの開始値。変えると別の配置になります
- stitchTiles
- stitchにすると端がなめらかになり、繰り返したタイルが継ぎ目なくつながります
- noStitch
グレインは、大きなグラデーションのプラスチックっぽさを取り除き、幅の広いヒーロー背景で起きる色のバンディングを防ぎます。PNGのグレインタイルはダウンロードが増え、拡大するとぼやけますが、SVGフィルターはごく小さなテキストで、どのサイズでもくっきり描画されます。スライダーを動かして、サンプルのグラデーション上でテクスチャを確認しましょう。
- 柔らかいフィルムグレインならfractal noise、粗い大理石のような質感ならturbulenceを選びます。
- 周波数を上げるとグレインが細かくなり、オクターブを増やすと細部が増えます。シードを変えると別のランダム配置になります。
- サンプルのグラデーション上でグレインの強さを設定し、色を残すかグレーにするかを選びます。
- SVGファイル、またはそれをデータURLの背景として埋め込むCSSをコピーします。
- グラデーションに控えめなグレインを乗せるなら、テクスチャの不透明度は0.1〜0.3に抑えましょう。それ以上だと汚れて見え始めます。
- fractal noiseで周波数を0.6〜0.9程度にすると、通常の画面サイズでフィルムグレインのように見えます。
- 色付きの粒子が欲しい場合を除き、ノイズはグレーに彩度を落としましょう。feTurbulenceはすべてのチャンネルにカラーノイズを生成します。
- フィルターをかける領域が広いと描画に時間がかかります。全画面の要素にリアルタイムでフィルターをかけるより、固定タイルを背景画像として適用するほうが軽くなります。
よくある質問
feTurbulenceとは何ですか？
パーリンノイズ関数から画像を生成するSVGのフィルタープリミティブです。入力画像が不要なので、SVG内のフィルター要素1つでテクスチャ全体を描けます。MDNによると、2015年以降、幅広いブラウザーで対応しています。
fractalNoiseとturbulenceの違いは何ですか？
fractalNoiseはオクターブをなめらかに混ぜ合わせ、柔らかい雲やフィルムグレインのように見えます。turbulenceはノイズの絶対値を使うため、よりシャープな稜線ができ、大理石、煙、水面の波紋に近くなります。
CSSのグラデーションにグレインを加えるには？
背景を2つ重ねます。上にデータURLにしたノイズSVG、下にグラデーションを置くか、ノイズを低い不透明度の::beforeレイヤーに置いてoverlayやsoft-lightなどのブレンドモードをかけます。このページの例では疑似要素を使う方法を紹介しています。
テクスチャは継ぎ目なくタイル状に並びますか？
stitchTilesをstitchに設定してください。ブラウザーが周波数をわずかに調整し、パターンがタイルの整数個分に収まるようにするため、複製同士が接する部分の継ぎ目が見えなくなります。
数値と見た目の対応
- baseFrequencyはフィルター領域の1ピクセルあたりのノイズ周期数で表されるため、0.05では大きなまだら模様、0.9ではほこりほどの細かい粒子になります。2つの数値を指定するとノイズが引き伸ばされ、ヘアライン加工の金属や木目に役立ちます。
- オクターブを1つ追加するごとに、周波数が2倍で強さが半分の細かいレイヤーが加わります。4つか5つを超えると違いはほとんど見えませんが、描画の負荷は増え続けます。
サイトでグレインをきれいに見せるには
- グレインは控えめなレイヤーとして使うのが最も効果的です。overlayやsoft-lightでブレンドすると、全体をグレーにするのではなく、明るい部分をより明るく、暗い部分をより暗くします。
- テクスチャを加えたら文字のコントラストを確認しましょう。小さな文字の背後に粒子があると読みにくくなるため、目立つグレインは背景やヒーロー領域にとどめてください。
グラデーションカードにグレインを乗せる
ブレンドモード付きのノイズレイヤー
SVGが200ピクセルのタイルにグレーのノイズを描きます。::beforeレイヤーがそれを低い不透明度で繰り返し、グラデーションとブレンドします。
同じテクスチャを単体のSVGファイルで
これをgrain.svgとして保存し、background-image: url(grain.svg)で使います。カラーマトリクスがノイズをグレーにします。
グレインスタジオ
変更するたびに、サンプルのグラデーション上でSVGフィルターがリアルタイムに再描画されます。アップロードは一切なく、テクスチャはブラウザーが描画します。
ノイズの種類
周波数：{v}
オクターブ：{n}
シード：{n}
グレインの強さ：{n}%
タイルサイズ：{n}px
グレーのノイズ
継ぎ目のないタイル（stitch）
ブレンドモード
グレインを適用したサンプルグラデーション
ランダムなシード
SVG
CSS
SVGをコピー
CSSをコピー
サンプルグラデーション
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る