CSS ウェーブジェネレーター カスタマイズ可能なウェーブ、 高さ、色を持つSVGウェーブセクションディバイダーを生成します。
CSS ウェーブジェネレーター
カスタマイズ可能なウェーブ、 高さ、色を持つSVGウェーブセクションディバイダーを生成します。
ウェーブのプロパティを設定
ウェーブの数、 高さ、色、および不透明度を設定します。
区切り線をプレビュー
2つのカラーセクション間にウェーブが表示され、方向を切り替えることができます。
コードをコピー
ウェーブセクションの区切り線用に生成されたHTMLとCSSをコピーします。
What Is CSS ウェーブジェネレーター?
CSS Wave Generatorは、スムーズでオーガニックな遷移を実現するために、ページセクション間の境界として使用されるSVGベースの波形セパレータを作成します。ウェーブは、モダンなWebデザインにおいて最も人気のあるセパレータスタイルの一つであり、硬い水平線に代わって流れる曲線で構成されています。このツールは、自然な波形を生成するためにベジェ曲線を使用してSVGパス要素を作成します。ウェーブの数、全体的な高さ、ウェーブカラー、背景色、不透明度、垂直方向の反転方向などを制御できます。プレビューでは、2つの色付きセクション間で波が配置されているため、コンテンツエリア間での遷移方法を正確に確認できます。生成されたコードには、SVGマークアップとウェーブセパレータの位置やスタイルを指定するために必要なCSSが含まれています。
Why Use CSS ウェーブジェネレーター?
-
完全なカスタマイズが可能なウェーブ数、 高さ、および色の調整
-
トップまたはボトムセクションの区切り線として使用できるフリップトグル
-
リアルな視覚化を実現するためにカラーセクション間にプレビュー
-
生成されたコードにはSVGとポジショニングCSSが含まれています
Common Use Cases
セクション区切り線
異なる色のページセクション間をスムーズに遷移させることができます。
フッタートランジション
視覚的な流れを実現するために、フッター上部にウェーブ区切り線を追加します。
ヒーローセクションの下部
ヒーローセクションからコンテンツへウェーブ形状で遷移させることができます。
機能セクションブレーク
有機的なウェーブ区切り線を使用して機能セクションを分離します。
Technical Guide
SVGウェーブは、スムーズで流れる形状を作成するために、path要素に3次ベジェ曲線(C)コマンドを使用します。SVGのviewBoxは、「0 0 100 100」に設定されており、preserveAspectRatio="none"が指定されているため、ウェーブは全コンテナ幅にわたって伸縮しながら、高さが維持されます。ウェーブ形状は、水平軸上でベジェ制御点を計算することによって生成され、垂直位置を交互に変更してピークと谷を作成します。ウェーブの数は、完全な振動の回数を制御します。高さは、ウェーブの振幅を制御します。遷移効果のために、pathは下部（または反転時に上部）で閉じて埋め立て形状を作成します。CSSのpositioning（width: 100%、display: block）は、SVGが全コンテナ幅にわたって広がることを保証します。また、transform: scaleY(-1)を使用してウェーブを垂直方向に反転させることもできます。
Tips & Best Practices
-
1エレガントでクリーンの区切り線を作成するために、2-4のウェーブを使用します
-
2ウェーブの色を下部のセクションに合わせて、一貫性のある遷移を実現します
-
3100%未満の不透明度を使用して層状のウェーブ効果を実現します
-
4異なる不透明度で複数のウェーブを組み合わせて、奥行き感を出すことができます
Related Tools
Frequently Asked Questions
Q SVGウェーブはレスポンシブですか?
Q 複数のウェーブを重ねることができますか?
Q ウェーブを反転する方法はありますか?
Q ウェーブをアニメーション化することができますか?
Q どのような高さが適していますか?
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.