グレイニーグラデーションジェネレーター

Photoshop なしでモダンな粒状グラデーションを

「グレイニーグラデーション」のルック — 滑らかなグラデーションに繊細なフィルムグレインを振りかけたもの — は、Linear のマーケティングページから数多くのハイエンド製品サイトまで、モダンデザインのあらゆる場面で見られます。このジェネレーターはこの効果を、あらゆる解像度にスケールし、画像ファイルを含まない小さな自己完結型の SVG として生成します。

粒状感の適用方法

内部では、ツールは単一の SVG 内に 2 つのレイヤーを構成します。ベースレイヤーはグラデーション（リニアまたはラジアル、2〜5 カラーストップ）で塗りつぶされた <rect> です。その上に、SVG 組み込みフィルター <feTurbulence type="fractalNoise"> で生成されたモノクロのノイズテクスチャで塗りつぶされた 2 つ目の <rect> が配置されます。ノイズレイヤーはユーザーが制御する不透明度で描画され、それが最終的な「埃っぽい」柔らかな質感を生み出します。

すべてが SVG フィルターを介して処理されるため、粒状パターンはどのサイズでも鮮明で繰り返しの跡がありません — タイル化された PNG とは違い、巨大なヒーロー領域に背景を引き伸ばしても継ぎ目が見えません。

コントロール

• タイプ — リニア（角度調整可）またはラジアル。
• カラーストップ — 2〜5 色、位置スライダーで遷移を正確に制御。
• 粒状感の強度 — ノイズレイヤーの不透明度。0 で粒状感オフ、値を上げるほどテクスチャが強く。
• 粒状スケール — 乱流の baseFrequency。低スケール = 太い触感のある粒、高スケール = フィルムのような細かいノイズ。
• オクターブ — 積層するノイズ層の数。多いほど細部が増える。
• シード — 再現性のための整数。同じシード = 同じ粒状パターン。

使用シーン

• 無機質ではなく触れるような質感のヒーロー背景
• アプリのスプラッシュ画面や iOS 風ウィジェットカード
• Product Hunt 風のローンチバナー
• 音楽やポッドキャストのアートワーク
• 繊細な奥行きのあるダッシュボードカード

SVG 出力は同サイズの JPG より常に鮮明で、フィルターはすべてのモダンブラウザで GPU 高速化されます。コードをコピーして <div> に貼り付け、どこでも拡大可能 — 粒状感はどのデバイス、ズームレベルでも忠実に保たれます。