Wave Generator

Wave Generator - CSS Clip path for containers | Product Hunt
Import existing clip-path

Dimensions

Wave Shape

Options

Free CSS wave generator

Wave Generator creates a CSS clip-path: polygon() that cuts a smooth wave into the edge of any container. It works for hero sections, section dividers, cards and footers, and needs no SVG, images or extra markup.

How to create a CSS wave

  1. Set the width and height of the element you want to shape.
  2. Shape the wave: offset moves it up or down, amplitude sets its height, frequency sets how many waves fit across, phase shifts it sideways and points controls how smooth it is.
  3. Turn on Invert clip to put the wave on the top edge instead of the bottom, or press Randomize for a starting point.
  4. Press Copy to clipboard and paste the clip-path line into your CSS.

Frequently asked questions

How do I use the generated CSS wave?

Click "Copy to clipboard" and paste the clip-path declaration into the CSS rule of the element you want to shape, such as a hero section or a footer. The points are in percentages, so the wave scales with the element.

Does the CSS clip-path wave work in all browsers?

Yes. clip-path: polygon() is supported in all modern browsers, including Chrome, Firefox, Safari and Edge.

How do I put the wave on the top edge instead of the bottom?

Turn on "Invert clip". The polygon is then anchored to the top of the element instead of the bottom.

Is Wave Generator free?

Yes. Wave Generator is free to use, with no sign-up, and the generated CSS can be used in personal and commercial projects.