Wave SVG generator
Adjust the size, shape and color of waves to create web page dividers or backgrounds. Copy or save the SVG or background CSS, or save a PNG image.
What you can do
Adjust shape and colors
Adjust the wave height, count, position, and fill direction, and create it in one or two colors.
Get the result in a format suited to your needs
Copy and save SVG code or a CSS background, or save it as a PNG image.
How to use
Choose a starting shape
Adjust the values directly, or choose a similar shape from “Choose a template”.
Adjust size and colors
Specify width, height, amplitude, and wave count. Adjust the starting position and center height in advanced settings.
Generate and check the SVG
Check the generated wave shape and transparent areas. Regenerate after changing settings.
Get the format you need
Choose SVG or a CSS background to copy or save, or save the PNG.
Useful for
Divide page sections
Create wave-shaped dividers between content sections or above a footer.
Match your site's colors
Use a solid color or gradient to create a background asset that matches the page's color scheme.
Wave shapes and save formats
Amplitude and wave count
Amplitude is the magnitude of vertical variation, and wave count is the number of cycles across the full width. This is not a feature for displaying audio waveforms.
Wave position and clipped areas
Change the starting position using phase, and the vertical position using center height. Parts outside the image are clipped.
Choosing between SVG and PNG
SVG represents the shape as vectors. PNG saves an image at the specified pixel dimensions and preserves transparent areas.
How to place a CSS background
CSS specifies a background image. Set the width and height of the element where you use it to provide an area for the background to display.
Frequently asked questions
Can I adjust the wave shape and colors?
You can specify values and colors. Select “Use two colors” to set the second color and the gradient angle.
What happens to the current settings when I select a template?
The settings, including width, height, and colors, are replaced by the template's settings. Adjust any necessary values after selecting it.
Does the preview change when I change settings?
After making changes, select “Generate SVG” to check the result. The old generated result is no longer available for display or saving.
Is the SVG an exact sine wave?
The wave is approximated with a smooth cubic curve. It is not a waveform for mathematical measurement or audio analysis.
File handling
- Input
- Create from numerical wave settings and colors. No image selection is needed.
- Output
- wave.svg, wave.css, and wave.png. SVG and CSS can also be copied.