CSS Wave Generator

Generate beautiful SVG wave patterns with animations. Create smooth, layered waves for section dividers, backgrounds, and decorative elements with full customization and export options.

Category: code
Use Case: Section Dividers, Hero Backgrounds, Footer Decorations
Privacy: 100% browser-based

Quick Presets

Wave Controls

Live Preview

Generated Code

<svg viewBox="0 0 1200 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M 0 150 L 0 75 L 12 80.01332934257218 L 24 84.9475954865942 L 36 89.72498210738712 L 48 94.27014696406862 L 60 98.51141009169893 L 72 102.38188423714755 L 84 105.82052971103157 L 96 108.7731170200806 L 108 111.19308209864079 L 120 113.04226065180615 L 132 114.29149002914755 L 144 114.92106913713087 L 156 114.92106913713087 L 168 114.29149002914755 L 180 113.04226065180615 L 192 111.19308209864079 L 204 108.7731170200806 L 216 105.82052971103157 L 228 102.38188423714755 L 240 98.51141009169893 L 252 94.27014696406863 L 264 89.72498210738712 L 276 84.9475954865942 L 288 80.01332934257218 L 300 75 L 312 69.98667065742782 L 324 65.0524045134058 L 336 60.275017892612865 L 348 55.7298530359314 L 360 51.48858990830108 L 372 47.618115762852455 L 384 44.179470288968425 L 396 41.22688297991939 L 408 38.806917901359206 L 420 36.95773934819386 L 432 35.708509970852454 L 444 35.078930862869136 L 456 35.078930862869136 L 468 35.708509970852454 L 480 36.957739348193854 L 492 38.806917901359206 L 504 41.22688297991938 L 516 44.17947028896842 L 528 47.61811576285244 L 540 51.488589908301066 L 552 55.729853035931384 L 564 60.27501789261285 L 576 65.05240451340579 L 588 69.98667065742781 L 600 74.99999999999999 L 612 80.01332934257216 L 624 84.9475954865942 L 636 89.72498210738712 L 648 94.27014696406863 L 660 98.51141009169893 L 672 102.38188423714757 L 684 105.82052971103155 L 696 108.77311702008059 L 708 111.19308209864077 L 720 113.04226065180615 L 732 114.29149002914755 L 744 114.92106913713087 L 756 114.92106913713087 L 768 114.29149002914755 L 780 113.04226065180615 L 792 111.19308209864077 L 804 108.7731170200806 L 816 105.82052971103154 L 828 102.38188423714759 L 840 98.51141009169893 L 852 94.27014696406864 L 864 89.72498210738712 L 876 84.94759548659422 L 888 80.01332934257215 L 900 75.00000000000001 L 912 69.98667065742788 L 924 65.0524045134058 L 936 60.27501789261291 L 948 55.72985303593138 L 960 51.48858990830109 L 972 47.61811576285243 L 984 44.179470288968474 L 996 41.22688297991942 L 1008 38.80691790135924 L 1020 36.95773934819386 L 1032 35.70850997085246 L 1044 35.078930862869136 L 1056 35.078930862869136 L 1068 35.708509970852454 L 1080 36.95773934819385 L 1092 38.80691790135923 L 1104 41.226882979919395 L 1116 44.17947028896846 L 1128 47.618115762852405 L 1140 51.488589908301066 L 1152 55.72985303593135 L 1164 60.27501789261288 L 1176 65.05240451340578 L 1188 69.98667065742784 L 1200 74.99999999999999 L 1200 150 Z" fill="#3b82f6" opacity="1" />
</svg>

Recommended Settings

Design Best Practices

  • •Use 1-2 layers for clean, professional designs
  • •Keep amplitude between 30-60px for subtle section dividers
  • •Match wave colors to your design system or brand
  • •Layer waves with decreasing opacity (0.8, 0.5, 0.3) for depth
  • •Position waves at section boundaries for natural flow

Performance Tips

  • •Limit to 3 wave layers maximum for optimal performance
  • •Use static waves when animation isn't necessary
  • •SVG waves scale perfectly to any screen size without quality loss
  • •Solid colors perform better than gradients on mobile devices
  • •Avoid animating waves on pages with heavy JavaScript

Pro Tips

  • •Frequency of 1.5-2.5 creates natural-looking ocean-style waves
  • •Phase shift of 30-60° between layers prevents repetitive patterns
  • •Use flip vertical for waves that flow downward from top position
  • •Animated waves work best with slow to normal speed for smooth effect

Most Popular

Amplitude: 40px, Frequency: 2, Position: bottom, 2 layers with opacity

How It Works

1

Select a preset or start with default wave settings

2

Adjust amplitude (height) and frequency (number of waves) for each layer

3

Customize colors with solid fills or gradients

4

Add multiple layers with different phase shifts for complex patterns

5

Enable animation for dynamic, moving wave effects

6

Configure position (top/bottom) and flip options

7

Copy or download SVG, CSS, or HTML code for your project

100% Private

Files never leave your device. All processing happens locally in your browser.

Lightning Fast

Powered by Pure JavaScript for optimal performance on modern browsers.

Secure

No data collection, no tracking, no sign-up required.

Frequently Asked Questions

What's the difference between SVG and CSS output?

SVG output gives you the raw SVG code that can be used inline in HTML or as a separate file. CSS output provides a complete CSS class with the SVG embedded as a data URI background-image, ready to apply to any element.

How do I make waves responsive?

The generated SVG uses viewBox and preserveAspectRatio="none" which makes it stretch to fill any container width while maintaining the wave pattern. Set your container width to 100% for full responsiveness.

Can I animate the waves?

Yes! Enable the Animation tab to add smooth horizontal movement to your waves. You can control speed (slow/normal/fast) and direction (left/right). The animation is achieved using SVG animateTransform.

What do amplitude, frequency, and phase mean?

Amplitude controls wave height (peak to trough), frequency determines how many complete waves appear across the width, and phase shifts the wave pattern horizontally, useful for offsetting multiple layers.

Why use multiple layers?

Layering multiple waves with different colors, opacities, and phase shifts creates depth and visual interest. Try using 2-3 layers with varying opacity (e.g., 0.7, 0.5, 0.3) for a professional, dimensional look.