SVG Blob ジェネレーター

類似ツール：CSS とデザイン

コードを見栄えのよい共有用画像に変換。複数のテーマに対応

線形・放射状・円錐グラデーションを視覚的にデザインし、CSS コードをすぐにコピー

?

まだコメントはありません。最初のコメントを書いてみましょう！

有機的な曲線のランダムな SVG ブロブ形状を生成します。複雑さ、ランダム性、塗りを調整でき、背景の装飾やイラスト要素に最適です。SVG または clip-path をコピーできます。

「複雑さ」スライダーは Blob の頂点数（3～10）を制御し、値が大きいほど細部が豊かになります。「ランダム性」は頂点が円からどれだけずれるかを制御し、0 でほぼ真円、100 で最も不規則な形になります。
6 つの色の丸をクリックして、グラデーション（紫、ローズ、シアン、アンバー、ピンク）または単色の塗りを選択します。色は右側のプレビューに即時反映されます。
5 種類の CSS アニメーション（なし、パルス、フロート、ゆらゆら、回転）から選べます。エクスポートする SVG ファイルには、対応する @keyframes コードが自動的に埋め込まれます。
「ランダム生成」をクリックすると新しい形にすぐ切り替わります。気に入った形が見つかったら、「複雑さ」と「ランダム性」を微調整して仕上げます。
下部のエクスポートバーには 4 つの選択肢があります。「SVG をコピー」は完全なマークアップ、「clip-path をコピー」はマスク用の CSS path()、「SVG」はベクターファイルのダウンロード、「PNG」は 800×800 のラスター画像のダウンロードです。

SVG Blob ジェネレーターとは何ですか？

色、複雑さ、ランダム性をカスタマイズできる、有機的でなめらかなブロブ形状の SVG グラフィックを生成します。背景の装飾によく使われます。

生成された SVG はどこで使えますか？

HTML/CSS に埋め込んだり、ダウンロードして Figma や Illustrator などのデザインツールに読み込んだりできます。

クリックするたびに異なる形が生成されますか？

はい。「再生成」をクリックするたびに、まったく新しいランダムなブロブ形状が生成されます。