SVG Wave Generator
Create customizable SVG wave shapes easily.
SVG Wave Generator
Layered SVG waves with amplitude, frequency, gradient, flip and mirror controls
Layer 1 is at the back, the last layer is in front. Each layer has its own colors, amplitude and offset.
Background off: the SVG is transparent and sits on any section color.
SVG code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" width="100%" preserveAspectRatio="none" style="display:block"><path d="M 0 300 L 0 147.3 Q 0 147.3 2.5 152.1 Q 5 156.9 7.5 160.4 Q 10 163.8 12.5 166.8 Q 15 169.7 17.5 169.5 Q 20 169.2 22.5 172 Q 25 174.8 27.5 177.4 Q 30 180 32.5 184.4 Q 35 188.7 37.5 189.6 Q 40 190.4 42.5 191.6 Q 45 192.7 47.5 195.8 Q 50 198.8 52.5 199.7 Q 55 200.5 57.5 204 Q 60 207.4 62.5 207.1 Q 65 206.7 67.5 206.7 Q 70 206.6 72.5 207.7 Q 75 208.7 77.5 209.3 Q 80 209.9 82.5 208.7 Q 85 207.4 87.5 209.9 Q 90 212.4 92.5 211.7 Q 95 210.9 97.5 209 Q 100 207.1 102.5 207.6 Q 105 208.1 107.5 206.7 Q 110 205.2 112.5 201.6 Q 115 198 117.5 197.6 Q 120 197.1 122.5 193.8 Q 125 190.5 127.5 189.6 Q 130 188.6 132.5 186.5 Q 135 184.4 137.5 182.9 Q 140 181.3 142.5 179.1 Q 145 176.8 147.5 172.1 Q 150 167.4 152.5 164.2 Q 155 161 157.5 159.4 Q 160 157.7 162.5 154.3 Q 165 150.8 167.5 149.1 Q 170 147.4 172.5 145.5 Q 175 143.6 177.5 139.1 Q 180 134.7 182.5 132 Q 185 129.2 187.5 125.3 Q 190 121.4 192.5 120.9 Q 195 120.3 197.5 118.9 Q 200 117.4 202.5 115.4 Q 205 113.3 207.5 110.5 Q 210 107.6 212.5 103.8 Q 215 100 217.5 98.4 Q 220 96.8 222.5 96.1 Q 225 95.3 227.5 95.7 Q 230 96.1 232.5 92.9 Q 235 89.6 237.5 91.1 Q 240 92.5 242.5 90.3 Q 245 88.1 247.5 89.2 Q 250 90.2 252.5 90.3 Q 255 90.3 257.5 90.8 Q 260 91.3 262.5 91.2 Q 265 91 267.5 93.4 Q 270 95.7 272.5 95.5 Q 275 95.3 277.5 97.2 Q 280 99.1 282.5 101.9 Q 285 104.8 287.5 105.4 Q 290 106 292.5 107 Q 295 108 297.5 110.8 Q 300 113.5 302.5 117.1 Q 305 120.6 307.5 121.5 Q 310 122.3 312.5 127.4 Q 315 132.4 317.5 134.4 Q 320 136.4 322.5 139 Q 325 141.6 327.5 143.8 Q 330 146 332.5 150.5 Q 335 154.9 337.5 156.5 Q 340 158 342.5 161.6 Q 345 165.1 347.5 165.9 Q 350 166.6 352.5 171.1 Q 355 175.5 357.5 177.6 Q 360 179.6 362.5 183.2 Q 365 186.8 367.5 188.8 Q 370 190.7 372.5 191.8 Q 375 192.8 377.5 193 Q 380 193.2 382.5 197 Q 385 200.7 387.5 200.8 Q 390 200.9 392.5 202.4 Q 395 203.8 397.5 204.3 Q 400 204.7 402.5 207.3 Q 405 209.8 407.5 211.3 Q 410 212.7 412.5 210.8 Q 415 208.9 417.5 210.9 Q 420 212.9 422.5 210.3 Q 425 207.7 427.5 207 Q 430 206.2 432.5 205.6 Q 435 204.9 437.5 205 Q 440 205.1 442.5 204.8 Q 445 204.5 447.5 201.7 Q 450 198.8 452.5 196.7 Q 455 194.5 457.5 193.5 Q 460 192.5 462.5 190.5 Q 465 188.5 467.5 184.5 Q 470 180.5 472.5 180.1 Q 475 179.6 477.5 175.6 Q 480 171.7 482.5 170.7 Q 485 169.7 487.5 165.1 Q 490 160.5 492.5 159.2 Q 495 157.8 497.5 154.4 Q 500 150.9 502.5 148.7 Q 505 146.5 507.5 141.1 Q 510 135.7 512.5 135.8 Q 515 135.9 517.5 132.5 Q 520 129 522.5 125.8 Q 525 122.6 527.5 121.6 Q 530 120.5 532.5 115.6 Q 535 110.6 537.5 111.1 Q 540 111.5 542.5 107.5 Q 545 103.4 547.5 101.8 Q 550 100.1 552.5 97.9 Q 555 95.7 557.5 95.2 Q 560 94.6 562.5 95 Q 565 95.4 567.5 92.8 Q 570 90.1 572.5 91.3 Q 575 92.4 577.5 91 Q 580 89.6 582.5 88.4 Q 585 87.3 587.5 88.4 Q 590 89.6 592.5 91.9 Q 595 94.2 597.5 93.6 Q 600 92.9 602.5 93.6 Q 605 94.2 607.5 96.2 Q 610 98.2 612.5 99.3 Q 615 100.4 617.5 102.3 Q 620 104.1 622.5 104.7 Q 625 105.3 627.5 109.7 Q 630 114.1 632.5 114.9 Q 635 115.6 637.5 118.8 Q 640 121.9 642.5 124.1 Q 645 126.3 647.5 130.4 Q 650 134.5 652.5 135.2 Q 655 135.9 657.5 138.8 Q 660 141.6 662.5 144.9 Q 665 148.2 667.5 149.8 Q 670 151.4 672.5 156.2 Q 675 160.9 677.5 163.2 Q 680 165.5 682.5 166.6 Q 685 167.6 687.5 172.8 Q 690 177.9 692.5 178.3 Q 695 178.6 697.5 181.1 Q 700 183.7 702.5 186.1 Q 705 188.5 707.5 192 Q 710 195.4 712.5 197.3 Q 715 199.1 717.5 201.4 Q 720 203.6 722.5 202.9 Q 725 202.2 727.5 202.8 Q 730 203.3 732.5 204.9 Q 735 206.5 737.5 208.3 Q 740 210.1 742.5 209.7 Q 745 209.2 747.5 208.1 Q 750 206.9 752.5 209 Q 755 211.1 757.5 209.2 Q 760 207.3 762.5 206.6 Q 765 205.9 767.5 205.9 Q 770 205.8 772.5 205.2 Q 775 204.6 777.5 203 Q 780 201.4 782.5 200.2 Q 785 199 787.5 195.8 Q 790 192.6 792.5 190 Q 795 187.3 797.5 187.8 Q 800 188.3 802.5 185.4 Q 805 182.4 807.5 177.9 Q 810 173.4 812.5 170.5 Q 815 167.6 817.5 165.9 Q 820 164.2 822.5 160.7 Q 825 157.2 827.5 154 Q 830 150.7 832.5 150.5 Q 835 150.3 837.5 146.4 Q 840 142.5 842.5 140.1 Q 845 137.7 847.5 134.9 Q 850 132.1 852.5 129.6 Q 855 127 857.5 124.9 Q 860 122.8 862.5 118.8 Q 865 114.7 867.5 112.3 Q 870 109.8 872.5 109.3 Q 875 108.7 877.5 106.9 Q 880 105 882.5 104 Q 885 102.9 887.5 100.4 Q 890 97.9 892.5 97.4 Q 895 96.9 897.5 94.2 Q 900 91.5 902.5 90.8 Q 905 90.1 907.5 89.5 Q 910 88.9 912.5 88.7 Q 915 88.4 917.5 89 Q 920 89.6 922.5 88.8 Q 925 88 927.5 91.2 Q 930 94.4 932.5 93.7 Q 935 92.9 937.5 93.8 Q 940 94.7 942.5 97.9 Q 945 101 947.5 99.9 Q 950 98.8 952.5 101.9 Q 955 104.9 957.5 107.4 Q 960 109.8 962.5 112.4 Q 965 114.9 967.5 116.8 Q 970 118.6 972.5 120.9 Q 975 123.2 977.5 125 Q 980 126.8 982.5 130.2 Q 985 133.5 987.5 134.9 Q 990 136.3 992.5 140.9 Q 995 145.4 997.5 148.3 T 1000 151.2 L 1000 300 Z" fill="#0099ff" opacity="1"/></svg>
The SVG has width 100% and no fixed height, so it stretches to the section it sits in. Set a CSS height to make the wave taller or shorter.
Free SVG Wave Generator for Web Design
An SVG wave generator creates smooth, scalable wave shapes as inline SVG or downloadable files. SVG waves are widely used in modern web design as decorative section dividers, hero area backgrounds, and page separators, giving websites a polished look without relying on heavy raster images.
This free online wave generator lets you build multi-layered waves with custom colors, amplitudes, and frequencies, then download the SVG or copy the code to embed directly in your HTML.
Why use SVG waves in web design?
- Lightweight: A single SVG wave is a few kilobytes of text that compresses very well, compared to a PNG or JPEG background that can be 20 to 100 KB.
- Perfectly scalable: SVG scales to any screen size without quality loss, making it ideal for retina and 4K displays.
- Animatable: Apply CSS animations to the SVG path for animated wave effects or loading indicators.
- Transparent background: SVG waves can sit on any background color seamlessly, unlike PNG images with fixed backgrounds.
How to create an SVG wave
- Adjust the amplitude slider to control the height of the wave peaks.
- Set the frequency to control how many waves appear across the width.
- Add multiple layers for a depth effect, each with a different color and opacity.
- Choose your wave and background colors, or set the background to transparent.
- Flip the wave horizontally or vertically to reverse its direction.
- Download the SVG file or copy the SVG code to paste directly into your HTML or component.
How to use SVG waves as CSS section dividers
To use a generated wave as a section divider, place the SVG element between two content sections. Set display: block and width: 100% to avoid horizontal gaps. Match the SVG background color to the section above and the wave fill to the section below.
In React or Vue, paste the SVG markup as a component or use it as a CSS background image with background-image: url("data:image/svg+xml,...").
Common wave design use cases
- Hero section bottom edge: Use a wave as the bottom border of a hero to create a smooth transition to the content below.
- Feature section dividers: Separate marketing sections with multi-layer waves for a modern SaaS landing page look.
- Footer top edge: Add a wave at the top of your footer for a polished page finish.
- Animated backgrounds: Animate the wave path with CSS keyframes for dynamic loading screens or hero effects.
SVG wave vs CSS clip-path wave
Searching for a wave clip-path generator? CSS clip-path polygons only support straight line segments, so a "wave" made with clip-path is really a series of angled cuts and looks jagged on close inspection. A true curved wave needs an SVG path with Bezier curves, which is exactly what this tool generates. If you want straight-edged shapes instead (diagonal sections, arrows, hexagons), use the CSS Clip-Path Generator: it has draggable points and image preview, and our guide 10 CSS clip-path examples with live previews covers the most useful shapes with copy-paste code.
Frequently Asked Questions
How do I add an SVG wave to my website?
Paste the generated SVG markup directly into your HTML between two sections, or save it as a file and reference it as a CSS background image. Set display: block and width: 100% on the SVG to avoid gaps, and match its colors to the sections above and below.
Should I use SVG or clip-path for wave dividers?
SVG is better for waves. CSS clip-path polygons only support straight segments, so curves come out jagged unless you use dozens of points. An SVG path renders smooth Bezier curves natively, weighs a few kilobytes, and can be layered for depth effects.
Can SVG waves be animated?
Yes. You can animate the path with CSS keyframes or SMIL, or translate layered waves horizontally at different speeds for a parallax ocean effect. Because SVG is vector-based, the animation stays sharp at any resolution.
Are SVG waves responsive?
Yes. With preserveAspectRatio and width: 100%, the wave scales fluidly to any screen size without quality loss. Use the viewBox attribute (included in the generated code) so the wave keeps its proportions across breakpoints.
Related
Free forever, no ads, no tracking. Support the project