CSS Waves Generator
polygon() with percentage coords for best browser support.clip-pathWavy backgrounds are a popular design trend that can give your website a smooth, organic, and modern look. One of the simplest and most efficient ways to create these waves is by using the clip-path property in CSS. This property lets you define a custom clipping area for an element — essentially shaping it into anything you want, including flowing wave patterns.
clip-path?The clip-path property defines which portion of an element is visible by “clipping” it to a particular shape. Anything outside that shape becomes invisible. The most common way to create wave-like shapes is by using the polygon() function, which lets you define points along the element’s edges.
.wave {
clip-path: polygon(0% 70%, 50% 100%, 100% 70%, 100% 100%, 0% 100%);
}
In this example, we define a shape that dips in the middle to create a wave at the bottom of an element.
Here’s a simple implementation of a CSS wave background using clip-path and a gradient:
<div class="wave-section"></div>
<style>
.wave-section {
height: 300px;
background: linear-gradient(135deg, #00b4db, #0083b0);
clip-path: polygon(0 70%, 50% 80%, 100% 70%, 100% 100%, 0% 100%);
}
</style>
This creates a section with a gentle, curved bottom edge. You can adjust the polygon points (percentages) to make the wave deeper, flatter, or more dynamic.
For more complex designs, you can stack multiple layers with different wave shapes and colors. This gives a realistic overlapping effect, similar to ocean waves.
<div class="wave-wrapper">
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<div class="wave wave3"></div>
</div>
<style>
.wave-wrapper {
position: relative;
height: 300px;
overflow: hidden;
}
.wave {
position: absolute;
width: 100%;
height: 100%;
}
.wave1 {
background: #6dd5ed;
clip-path: polygon(0 70%, 50% 90%, 100% 70%, 100% 100%, 0% 100%);
}
.wave2 {
background: #2193b0;
clip-path: polygon(0 75%, 50% 95%, 100% 75%, 100% 100%, 0% 100%);
opacity: 0.8;
}
.wave3 {
background: #0f2027;
clip-path: polygon(0 80%, 50% 100%, 100% 80%, 100% 100%, 0% 100%);
opacity: 0.5;
}
</style>
Each wave has slightly different coordinates and opacity, creating a layered illusion of depth and movement.
You can animate waves using @keyframes and transform: translateX() to simulate motion. To make the animation seamless, create two identical wave shapes and move them horizontally in a loop.
.wave {
position: absolute;
width: 200%;
height: 100%;
background: #00b4db;
clip-path: polygon(0 70%, 50% 80%, 100% 70%, 100% 100%, 0% 100%);
animation: waveMove 8s linear infinite;
}
@keyframes waveMove {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
This technique works best when you use two copies of the same wave layer — one follows the other — so the animation loops smoothly without visible jumps.
polygon() coordinates for each layer to simulate natural flow.cubic-bezier() easing function for smoother movement transitions.If you don’t want to manually adjust coordinates, you can use this generator to create wave shapes visually and to save your time while coding.
Creating CSS waves with clip-path is a lightweight, pure-CSS solution that doesn’t require images or SVG files. By manipulating polygon points and layering multiple shapes, you can achieve beautiful, fluid backgrounds suitable for headers, transitions, or section dividers. Combine this with animation to bring your website designs to life.