背景用グレイン（ノイズ）テクスチャジェネレーター

背景用グレイン（ノイズ）テクスチャジェネレーター: 用途

薄いグレインの層は、無地の背景やグラデーションに紙やフィルムのような質感を与え、なめらかなグラデーションに出る帯状のムラも目立たなくします。

粒の大きさ、細かさ、不透明度、ブレンドモードを調整して、テスト用のグラデーションの上で結果を確認できます。SVGのノイズ（feTurbulenceフィルター、容量が小さく継ぎ目なし）を擬似要素に適用したCSSをコピーするか、128、256、512pxのPNGをダウンロードして背景で繰り返し使えます。

使い方

1. 粒、不透明度、ブレンドを調整します。
2. 自分の背景色の上で試します。
3. CSSをコピーするかPNGをダウンロードします。

使うタイミング

• グラデーションのヒーロー背景。
• 紙の質感のカード。
• レトロやフィルム風のデザイン。

よくある質問

グレインは何のために使いますか？

薄いノイズの層は、無地の背景やグラデーションのプラスチックのような印象を和らげ、より自然な見た目にします。さらに、なめらかなグラデーションに出る帯状のムラ（バンディング）も目立たなくします。

SVGとPNGのどちらがよいですか？

feTurbulenceを使ったSVGは容量がごく小さく、どんなサイズにも対応しますが、ブラウザーが描画するため、大きなアニメーション画面では負荷がかかることがあります。PNGは小さなブロックを繰り返すだけで、描画が軽くなります。固定背景ならどちらも問題なく使えます。

グレインはどのくらい使えばよいですか？

控えめにしてください。不透明度5%〜15%ほどで、ページを汚さずに質感が出ます。それ以上だと背景がざらついた写真のようになり、上に重ねた文字が読みにくくなります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール