Smart Tools Utility

CSS Waves / Wave Divider Generator

Smooth • Choppy • Single Curve • Layered • SVG Section Dividers

Amplitude (Wave Height)24px
Frequency (Wave Count)2
Divider Band Height120px
Live Preview — Simulated Hero Section
Section A (Hero)
Section B
SVG Code

                    


                    

                        

                            
 CSS Usage Snippet

                            
                        

                        

                    

                

            

                    
        

    


    
    

        

            
 About

            
 Contact

        

        

            
About CSS Waves / Wave Divider Generator

            
This tool builds a wavy SVG shape you can drop between two sections of a page — most commonly under a hero section — as a smooth, choppy, single-curve, angular, or layered "parallax" transition. The wave shape is generated mathematically from a sine curve (amplitude and frequency controls) and rendered as a smooth Catmull-Rom-to-Bezier path, or as straight angular segments for the zigzag style. The preview simulates a real two-section page so you can see exactly how the divider sits between content blocks. Copy the raw SVG markup to embed directly in your HTML, or copy the CSS usage snippet showing how to position it absolutely at the top or bottom of a section (the same SVG works for both positions — the bottom placement simply flips it with a CSS transform). All processing happens locally in your browser.

        

        
    


    
    
    

        

            

                
                All CSS & Web Design →