CSSブロブシェイプ ジェネレーター
8方向のborder-radiusで、有機的なブロブ図形のCSSを作れます
border-radiusのスラッシュ構文にある8つの値をスライダーで調整し、しずくや葉っぱのような有機的なブロブ形状をリアルタイムプレビューで確認できるツールです。デザイナーやフロントエンドエンジニアが、背景の装飾、プロフィール画像のマスク、カードUIなどに使うCSSを手早く用意したいときに便利です。計算はすべてブラウザ内で行われ、サーバーへ送信されることはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 有機的、しずく、葉、たまごの中から好きなプリセットを選んで始めます。
- 水平方向と垂直方向、合計8つのスライダーを動かして形を細かく調整します。
- プレビューでリアルタイムに変化するブロブ形状を確認します。
- 完成したborder-radiusのCSSコードをコピーボタンで取得し、プロジェクトに貼り付けます。
よくある質問
- 生成されたCSSはすべてのブラウザで正しく動きますか?
- border-radiusのスラッシュ(/)構文はモダンブラウザで広くサポートされています。ただし、古いブラウザにも対応する必要がある場合は、別途テストすることをおすすめします。
- スライダーの値は何を表していますか?
- スラッシュの前の4つの値は各角の水平方向の半径、後ろの4つの値は垂直方向の半径です。値を組み合わせることで、さまざまな曲線の形を作れます。
- 画像にもこの形を適用できますか?
- はい。生成されたborder-radiusの値を画像やdiv要素のCSSにそのまま適用すれば、その要素がブロブの形に切り抜かれて表示されます。