プレビュー
#6366f1
#8b5cf6
SVGコード
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 150" preserveAspectRatio="none">
  <defs>
    <linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#6366f1" />
      <stop offset="100%" stop-color="#8b5cf6" />
    </linearGradient>
  </defs>
  <g>
  <path d="M0,150 L0,45 C79.2,67.48027754946625 158.4,53.606419590584196 240,52.06270596574187 C319.2,51.70166755290779 398.4,46.93007870899983 480,35.88857477339384 C559.2,8.947567139494957 638.4,53.05431488112282 720,45.913471354131346 C799.2,52.07390222911439 878.4,34.81892645583438 960,54.46462880562275 C1039.2,13.467327796838852 1118.4,50.34128889690213 1200,37.36166015610176 L1200,150 Z" fill="url(#waveGrad)" opacity="0.60" />
  <path d="M0,150 L0,67.5 C79.2,89.5106953939007 158.4,55.3068860330651 240,62.72237181673868 C319.2,35.19375214595056 398.4,58.955762256614754 480,57.164164616104294 C559.2,88.77059427032741 638.4,69.46657395547562 720,77.3056464524966 C799.2,33.00014577945701 878.4,79.91241349951011 960,59.45579084425968 C1039.2,38.046561054907066 1118.4,53.58626263266721 1200,73.71071149185798 L1200,150 Z" fill="url(#waveGrad)" opacity="0.48" />
  <path d="M0,150 L0,90 C79.2,111.54111323833517 158.4,102.007352475546 240,103.38203766773549 C319.2,78.68583673899334 398.4,115.98144580422968 480,78.43975445881475 C559.2,108.59362140115985 638.4,85.87883302982843 720,78.69782155086185 C799.2,73.92638932979963 878.4,80.00590054318583 960,94.44695288289662 C1039.2,62.62579431297527 1118.4,101.83123636843229 1200,80.05976282761421 L1200,150 Z" fill="url(#waveGrad)" opacity="0.36" />
  </g>
</svg>
CSSコード
.wave-divider {
  width: 100%;
  height: 150px;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

「SVG波形ジェネレーター」とは

Webサイトのセクション区切りやヒーローエリアの装飾に使える波形SVGを、ブラウザ上でビジュアルに作成できる無料オンラインツールです。サイン波・三角波・ステップ・ブロブの4種類から選び、色やレイヤー数を自由にカスタマイズできます。

使い方

  1. 波形タイプ・色・レイヤー数などを調整してデザインを作成
  2. プレビューでリアルタイムに確認
  3. SVGコードまたはCSSコードをワンクリックでコピーして利用

特徴

  • 4種類の波形タイプ（サイン波・三角波・ステップ・ブロブ）を切り替え可能
  • レイヤー数・複雑さ・高さ・不透明度を自由に調整
  • グラデーションカラーのカスタマイズと上下反転機能
  • ランダムボタンで新しい波形パターンを即座に生成

よくある質問

Q. 生成したSVGは商用利用できますか？

はい、生成されたSVGコードは自由にお使いいただけます。個人サイト・商用サイトどちらでもOKです。

Q. セクションの上側に配置したいときは？

「上下反転」のチェックをONにすると、波形が上向きになります。セクションの上部に配置する場合に便利です。

Q. レスポンシブ対応していますか？

はい、SVGはviewBoxとpreserveAspectRatio="none"を使用しており、親要素の幅に合わせて自動的にスケールします。