出力

色

歪み

60%

複雑さ（点の数）

プレビュー

コード

生成はすべてブラウザ内で行われ、設定はアップロードされません。

Web サイトのヒーロー背景、装飾、アイコンの土台、SNS 画像などで人気の「ブロブ（blob）」＝ふにゃっとした有機的な形を、ブラウザだけで作れるジェネレーターです。出力は 2 種類から選べます。(1) SVG モードは、複数の制御点を円周上に並べてなめらかな三次ベジェ曲線で繋いだ滑らかな輪郭を `<svg>` のコードとして出力します。「複雑さ（点の数）」で輪郭の凹凸の数、「歪み」で各点のへこみ具合を調整でき、「ランダム」ボタンで形を一発で振り直せます。生成した SVG はそのままコピーできるほか、1024px の透明 PNG として保存できるので、Figma や Illustrator を開かなくても素材が手に入ります。(2) CSS モードは、`border-radius` を 8 値（`a% b% c% d% / e% f% g% h%`）で指定する手法で、`div` 1 つに当てるだけのブロブ風角丸を CSS コードとして出力します。プレビューはリアルタイムで更新され、透明部分は市松模様で確認できます。色・歪み・点の数・出力モードはあなたのブラウザ内だけで処理し、サーバーへアップロード・保存・送信は一切行いません。

使い方

出力モード（SVG / CSS border-radius）を選び、色を決めます。
「歪み」で凹凸の強さを、SVG なら「複雑さ（点の数）」で輪郭の細かさを調整します。「ランダム」で形を振り直せます。
「コピー」で SVG / CSS のコードを取得します。SVG モードでは「PNG を保存」で透明 PNG をダウンロードできます。

よくある質問

ブロブ（blob）とは何ですか？

ふにゃっとした、円でも多角形でもない有機的な形のことです。角がなく非対称で、Web サイトのヒーロー背景や装飾、アイコンの土台、SNS 画像などで「やわらかく今っぽい」見た目として人気があります。

SVG と CSS border-radius の違いは何ですか？

SVG モードは制御点をなめらかに繋いだ自由な輪郭を `<svg>` の path として出力し、複雑で凹凸のある形を作れます。CSS モードは `border-radius` を 8 値で指定する手法で、画像なしに `div` 1 つだけでブロブ風の角丸を表現します。用途で使い分けてください。

PNG で保存できますか？

はい。SVG モードでは「PNG を保存」ボタンで、背景が透明な 1024px の PNG をダウンロードできます。生成したブロブをそのまま画像素材として使えます。

同じ形をまた作れますか？

ページを開き直しても、色・歪み・点の数といった設定はブラウザに保存され前回の状態に戻ります。形そのものは「ランダム」を押すたびに変わりますが、押さなければ同じ形が保たれます。

入力した設定はアップロードされますか？

いいえ。生成・プレビュー・PNG 書き出しはすべてあなたのブラウザ内で完結し、色や設定はサーバーへアップロード・保存・送信されません。完全にローカルで動作します。