What wave styles are available?

Five styles are built in: Smooth (cubic bezier curves), Sharp (straight V-shapes), Jagged (random-height spikes), Layered (two offset smooth waves), and Double Wave (S-curve using two peaks per period).

How do I use the SVG as a CSS background?

Click 'Copy CSS' to get a background-image property using a data-URI. Paste it directly into your stylesheet — no external file required.

Flip Horizontal mirrors the wave so peaks become troughs and vice versa. Flip Vertical rotates the shape 180° so the wave points upward instead of downward — useful for bottom section dividers.

Can I use a gradient fill?

Yes — enable the gradient toggle and choose a start and end color. The gradient is embedded directly in the SVG as a linearGradient definition.

Design 무료 회원가입 불필요

SVG Wave Generator

Create decorative SVG wave dividers for websites with live preview and one-click download.

도구를 불러오는 중…

이 도구에 대해

Generate smooth, sharp, jagged, layered, or double-wave SVG shapes for section dividers on websites. Fine-tune amplitude (wave height), frequency (number of crests), fill color, optional gradient, horizontal and vertical flipping, viewport height, and the number of overlapping layers (1–3). Choose from 10 built-in presets or tweak every parameter manually. The live preview updates in real time. Copy the raw SVG markup, grab the equivalent CSS background-image data-URI, or download the shape as a standalone .svg file ready to drop into any project.

사용 방법

1 Select a wave style or click one of the 10 presets to start.
2 Adjust amplitude, frequency, and height sliders to shape the wave.
3 Pick a fill color and optionally enable a gradient with a second color.
4 Use the Flip buttons to orient the wave for top or bottom placement.
5 Add 1–3 layers with different opacities for a more organic look.
6 Click 'Copy SVG', 'Copy CSS', or 'Download SVG' to export your wave.

이 도구에 대해

사용 방법

자주 묻는 질문