ノイズテクスチャ ジェネレーター

CSS用のノイズテクスチャをデータURLとして生成し、コードをそのままコピー。粒状感と不透明度を調整できる無料ツール、登録不要。

Preparing private browser tool…

Your file will stay on this device.

よくある質問

ノイズテクスチャは何に使うものですか?
フラットな背景や UI の面にわずかな粒状感を加えることで、グラデーションの縞(バンディング)を目立たなくし、質感のある仕上がりになります。
なぜデータ URL で出力するのですか?
データ URL なら PNG を CSS に直接埋め込めるため、追加の HTTP リクエストが不要になります。単体で完結し、オフラインでも動作します。
モノクロとカラーはどう使い分けますか?
モノクロはどんな背景に重ねても色合いをずらさないため、無難な選択です。カラーはより有機的な印象になりますが、背景の色とぶつかることがあります。
各スライダーは何を調整するものですか?
「密度」は粒が乗るピクセルの割合、「不透明度」はその粒のアルファ値、「サイズ」は 64〜512 px のタイルの大きさです。モノクロを選ぶと、各粒が色ではなくグレーになります。
コピーされるデータ URL はどれくらいの長さになりますか?
タイルのサイズに応じて長くなるため、512 px のタイルは 128 px の場合よりかなり長い文字列になります。小さいタイルでも背景の粒状感としては十分に継ぎ目なく繰り返されるので、スタイルシートを扱いやすい大きさに保てます。