Hub SVG Wave Generator
🌊

SVG Wave Generator

Generate beautiful SVG wave shapes for backgrounds, section dividers, and hero sections. Customise layers and export as SVG, PNG, or CSS.

Live Preview
1200 × 180
Background
BG Color
Wave Shape
Width 1200
Height 180
Amplitude 60
Frequency 2.0
Phase 0°
Smooth (cubic bezier)
Layers
Layer 1 Base
Fill
Opacity 90%
V-Offset 0
Layer 2
Fill
Opacity 70%
V-Offset 20
Ph.Shift 45°
Layer 3
Fill
Opacity 55%
V-Offset 35
Ph.Shift 90°
Presets
SVG Code 

          

          

            Size: —
            Layers: —
            Paths: —
          

        


        
        

          

            CSS background-image
            

              
            

          

          

            

          

        


      

    

    

      
How to use

      
    
        
  1. Adjust amplitude, frequency and phase to shape the wave — the live preview updates instantly.
    2. 
        
  2. Stack 2–3 layers at different opacities and colours for a richer, depth-layered effect.
    3. 
        
  3. Copy the SVG markup or the CSS background-image data URI and drop it into your site.
    4. 
      

    


    

      
FAQ

      

        
        
Yes — SVG is resolution-independent, so the wave renders crisply on retina displays and any screen width without blur.

      

      

        
        
Copy the SVG and add a CSS @keyframes rule that translates the path horizontally. An infinite linear animation creates a flowing background effect.

      

      

        
        
Yes — every generated wave is yours to use in any project, commercial or personal, with no attribution required.