SVG ぼかしシェイプジェネレーター

重い画像なしで柔らかく幻想的な背景を

ぼかしのあるカラフルな背景 — しばしば「オーロラ」や「抽象的なグラデーション」と呼ばれる — は、ランディングページ、ダッシュボード、アプリのスプラッシュ画面の定番スタイルになっています。重い PNG を配信する代わりに、このジェネレーターは feGaussianBlur フィルターでぼかされた少数の SVG 楕円を出力します。解像度に関係なく鮮明で、ファイルサイズはわずか数キロバイトに収まり、ブラウザの GPU を最大限活用します。

仕組み

ツールはシードベースの乱数関数を使って、800×600 の viewBox 内に楕円をランダムに散りばめます。各楕円はパレットから色を選択。グループ全体は強いガウシアンぼかしを適用する SVG フィルターで包まれ、個々の形状が互いに溶け合って柔らかい雲のような見た目を作り出します。

コントロール

• シェイプ — 描画するぼかし楕円の数。多いほど濃密な背景に。
• ぼかし — ガウシアンぼかしの強さ。弱いと形状が残り、強いと一体化してグラデーション化。
• サイズのばらつき — 形状サイズのばらつき具合。
• パレット — 最大 5 色までカスタマイズ可能。ブランドに合わせて追加・削除。
• 背景 — ぼかしシェイプの背後に描画されるソリッドカラー。
• シード + 再生成 — 再生成で配置を切り替え。同じシードは常に同じ結果。

よくある用途

• ヒーローセクションの背景
• モダンなアプリスプラッシュ画面
• OG / SNS シェア画像
• 料金セクションの背景
• マーケティングページのカード背景

preserveAspectRatio="none" のおかげで、width: 100% の任意のコンテナに伸縮できます。出力を HTML、React、デザインツールに直接貼り付けたり、後からテキストエディタで色を微調整したりできます。