CSS ブルブ ジェネレーター グラデーション塗りつぶしとランダム化を備えた有機的なブルブ形状をSVGで生成します。
CSS ブルブ ジェネレーター
グラデーション塗りつぶしとランダム化を備えた有機的なブルブ形状をSVGで生成します。
SVG
SVG
What Is CSS ブルブ ジェネレーター?
CSS Blob Generatorは、有機的で不規則な形状をSVGパスとして生成します。Blobは滑らかで流れるような形状であり、ウェブデザインに視覚的な魅力と自然な、有機的な感覚を追加します。これらは一般的に背景装飾、画像マスク、および装飾アクセントとして使用されます。このツールは、調整可能な複雑さ（制御点の数）を持つベジエ曲線を使用してプログラムでBlobを生成します。ランダム化ボタンの各クリックにより、制御点の位置を変えることでユニークな形状が作成されます。Blobのサイズ、複雑さポイントの数、および単色またはグラデーション塗りつぶしを選択できます。出力は、オプションでグラデーションの定義を含むクリーンなSVGコードであり、インラインまたは背景画像として使用することができます。
Why Use CSS ブルブ ジェネレーター?
-
1
-
-
-
2
-
SVG
Common Use Cases
CSS
Image Masks
clip-path
Hero
gradient
Technical Guide
Blobジェネレーターは、3次ベジエ曲線（Cコマンド）を使用してSVGパス要素を作成します。点は等しい角度間隔で円周に分布し、ランダム化された半径値によって有機的な不規則性が作成されます。ベジエ制御点は滑らかな曲線を作成するために計算され、Blobの形状が自然な流れを持って鋭い角を形成しないようにします。複雑さパラメータはポイントの数を制御し、より多くのポイントでより複雑で詳細な形状が作成されます。グラデーション塗りつぶしの場合、SVG線形グラデーションの定義がSVGのdefsセクションに含まれます。Blobはインライン要素として使用することも、データURIテクニックを使用してCSS背景に変換することもできます。アニメーションの場合は、SVGパスのd属性を異なるBlob形状間でアニメートしてモーフィング効果を実現します。スムーズなモーフィング遷移のために同じ数の制御ポイントを使用します。
Tips & Best Practices
-
15-7
-
2gradient
-
3-
-
4CSS background-imageSVG
Related Tools
Frequently Asked Questions
Q SVG?
Q clip-path?
Q CSS?
Q SVG?
Q SVG?
About This Tool
CSS ブルブ ジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.