🫧 CSSブロブ図形ジェネレーター

8つのスライダーを操作してborder-radiusの値を調整し、水滴や葉っぱのような有機的なブロブ形状をリアルタイムのプレビューで確認できるツールです。背景装飾やアバターマスク、カードUIなどに使うCSSを手早く作りたいデザイナーやフロントエンド開発者に便利です。すべての処理はブラウザ内で完結し、サーバーには送信されません。

使い方

1. 「オーガニック」「水滴」「葉っぱ」「卵」から好きなプリセットを選びます。
2. 水平方向・垂直方向それぞれ4つ、計8つのスライダーで形を細かく調整します。
3. プレビューでブロブ形状の変化をリアルタイムに確認します。
4. 完成したborder-radiusのCSSコードをコピーしてプロジェクトに貼り付けます。

よくある質問

生成されたCSSはどのブラウザでも動きますか?

border-radiusのスラッシュ（/）構文は主要な最新ブラウザで広くサポートされています。古いブラウザに対応する必要がある場合は事前に確認してください。

スライダーの値は何を表していますか?

スラッシュの前の4つの値は各角の水平方向の半径、後ろの4つは垂直方向の半径です。組み合わせることで様々な曲線が作れます。

この形状は画像にも適用できますか?

はい。生成されたborder-radiusの値を画像やdiv要素のCSSに適用すれば、その要素がブロブ形状に切り抜かれます。