Hero Section Bottom Wave
A wide wave at the bottom of a hero section creates a smooth visual transition into the next part of the page.
CSS Waves Generator
Free CSS Shape Tool
Create custom CSS wave shapes visually. Adjust amplitude, wavelength, phase, position, direction and color, preview the result and copy clean CSS or export the wave as SVG.
clip-path: polygon() with percentage
coordinates so the wave scales with its container.
This CSS Waves Generator is a free visual tool for creating curved section
dividers, decorative backgrounds and wave-shaped UI elements. It generates
percentage-based clip-path: polygon() coordinates that can be
applied to normal HTML elements.
You can control amplitude, wavelength, smoothness, phase, vertical position, direction, inversion and color. The tool also supports animated previews and SVG export for projects where a vector wave is more appropriate than a CSS polygon.
A wide wave at the bottom of a hero section creates a smooth visual transition into the next part of the page.
A wave placed at the top of a section can separate contrasting background colors without using a straight horizontal edge.
Several overlapping wave elements with different colors and offsets can simulate ocean water or fluid decorative backgrounds.
Moving the phase or background position creates a subtle animated wave for loading screens, landing pages and interactive banners.
A wave above the footer creates a softer transition between page content and the closing navigation area.
A wave can be represented as a series of coordinate points. The generator
converts the curve into percentage-based polygon points and applies them
through the CSS clip-path property.
.wave {
width: 100%;
height: 200px;
background: #fdca40;
clip-path: polygon(
0% 70%,
10% 60%,
20% 55%,
30% 60%,
40% 70%,
50% 80%,
60% 85%,
70% 80%,
80% 70%,
90% 60%,
100% 55%,
100% 100%,
0% 100%
);
}
Amplitude controls the vertical height of the wave. A low amplitude creates a gentle curve, while a high amplitude creates deeper peaks and valleys.
Wavelength controls how many wave cycles appear across the width. Fewer cycles create long, smooth curves. More cycles create a tighter wave pattern.
Phase shifts the wave horizontally. Changing the phase does not change the height or number of cycles, but it changes where peaks and valleys appear.
Since clip-path: polygon() uses straight segments between
points, adding more points makes the final curve appear smoother. More points
also produce a longer CSS value.
Bottom waves are commonly used below hero sections. Top waves work well for sections that need a curved entrance from the content above.
.section-wave {
position: absolute;
left: 0;
width: 100%;
height: 160px;
}
.section-wave.bottom {
bottom: 0;
}
.section-wave.top {
top: 0;
}
A wave divider can be positioned absolutely inside a section. The parent
section should use position: relative and enough padding to
prevent content from overlapping the wave.
.hero {
position: relative;
min-height: 600px;
padding: 6rem 2rem 12rem;
overflow: hidden;
background: #2563eb;
}
.hero-wave {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 180px;
background: #ffffff;
}
Multiple wave elements can be stacked with slightly different positions, amplitudes and opacity values to create depth.
.wave-back {
background: rgba(96, 165, 250, .45);
transform: translateY(20px);
}
.wave-front {
background: #2563eb;
}
Complex polygon coordinates are not always ideal for continuous animation. A practical technique is to place a wide repeating wave inside an overflow-hidden wrapper and animate its horizontal position.
.wave-track {
width: 200%;
animation: move-wave 8s linear infinite;
}
@keyframes move-wave {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
CSS polygon waves are convenient for simple scalable section dividers. SVG is often better for highly precise curves, complex animation, gradients, masks or reusable vector assets.
Percentage coordinates allow the wave to scale with the width and height of its element. However, very narrow or very tall containers may change the apparent shape, so test the result across multiple screen sizes.
Decorative waves should not contain essential information. If an SVG wave
is purely decorative, hide it from assistive technology with
aria-hidden="true".
Static clip paths are generally suitable for decorative sections. Avoid animating very large elements with extremely complex polygons on every frame. For continuous motion, transform-based animation is usually a better choice.
You can create a wave-like shape with clip-path: polygon()
by defining a sequence of coordinate points that approximate a curved line.
Amplitude controls the vertical distance between the wave peaks and valleys. Higher amplitude values create taller waves.
Wavelength controls how many wave cycles appear across the width of the element.
Polygon edges are straight, so more points make the final shape appear smoother and closer to a natural curve.
Yes. The wave can be generated for the top or bottom edge and positioned accordingly inside the section.
Yes. Wave movement can be simulated with phase changes, transform animation or a horizontally moving wave track.
CSS is convenient for simple responsive shapes. SVG is usually better for precise curves, complex gradients and advanced animation.
Yes. Percentage-based polygon coordinates scale with the element, although the final appearance should still be tested at different aspect ratios.