LoveCSS.comLoveCSS

CSS Wave Generator

Beautiful Wave Background

Create modern and elegant wave designs with pure CSS.

Get Started

1. Wave Style

2. Wave Position

3. Wave Settings

%
%
%

4. Background

deg
Start
End

5. Wave Layers

Number of layers
Layer 1front
to
%
Layer 2
%
Layer 3
%
°

6. Additional Options

%
px
px

7. Preview Context

8. Animation (Optional)

s

9. Advanced (Optional)

(adds an SVG tab)

CSS Output

.wave-background {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-content: center;
  padding: 64px 24px;
  text-align: center;
  color: #1e1b4b;
  background-image: linear-gradient(135deg, #f8faff, #fce7f3);
}

.wave-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0.5' x2='1' y2='0.5'%3E%3Cstop offset='0' stop-color='%23a78bfa'/%3E%3Cstop offset='1' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-opacity='0.85' d='M0,19.2 C24,19.2 66,31.8 90,42.3 C114,52.8 156,83.1 180,97.9 C204,112.8 246,143.1 270,153.6 C294,164.1 336,176.6 360,176.6 C384,176.6 426,164.1 450,153.6 C474,143.1 516,112.8 540,97.9 C564,83.1 606,52.8 630,42.3 C654,31.8 696,19.2 720,19.2 C744,19.2 786,31.8 810,42.3 C834,52.8 876,83.1 900,97.9 C924,112.8 966,143.1 990,153.6 C1014,164.1 1056,176.6 1080,176.6 C1104,176.6 1146,164.1 1170,153.6 C1194,143.1 1236,112.8 1260,97.9 C1284,83.1 1326,52.8 1350,42.3 C1374,31.8 1416,19.2 1440,19.2 L1440,320 L0,320 Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23f472b6' fill-opacity='0.55' d='M0,42.3 C24,52.8 66,83.1 90,97.9 C114,112.8 156,143.1 180,153.6 C204,164.1 246,176.6 270,176.6 C294,176.6 336,164.1 360,153.6 C384,143.1 426,112.8 450,97.9 C474,83.1 516,52.8 540,42.3 C564,31.8 606,19.2 630,19.2 C654,19.2 696,31.8 720,42.3 C744,52.8 786,83.1 810,97.9 C834,112.8 876,143.1 900,153.6 C924,164.1 966,176.6 990,176.6 C1014,176.6 1056,164.1 1080,153.6 C1104,143.1 1146,112.8 1170,97.9 C1194,83.1 1236,52.8 1260,42.3 C1284,31.8 1326,19.2 1350,19.2 C1374,19.2 1416,31.8 1440,42.3 L1440,320 L0,320 Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%2393c5fd' fill-opacity='0.45' d='M0,97.9 C24,112.8 66,143.1 90,153.6 C114,164.1 156,176.6 180,176.6 C204,176.6 246,164.1 270,153.6 C294,143.1 336,112.8 360,97.9 C384,83.1 426,52.8 450,42.3 C474,31.8 516,19.2 540,19.2 C564,19.2 606,31.8 630,42.3 C654,52.8 696,83.1 720,97.9 C744,112.8 786,143.1 810,153.6 C834,164.1 876,176.6 900,176.6 C924,176.6 966,164.1 990,153.6 C1014,143.1 1056,112.8 1080,97.9 C1104,83.1 1146,52.8 1170,42.3 C1194,31.8 1236,19.2 1260,19.2 C1284,19.2 1326,31.8 1350,42.3 C1374,52.8 1416,83.1 1440,97.9 L1440,320 L0,320 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 100% 30%, 100% 37.5%, 100% 45%;
  background-position: 0 100%;
}

.wave-background h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.wave-background p {
  margin: 12px 0 0;
  font-size: 1.05rem;
  opacity: 0.75;
}

Popular Wave Presets

Examples

About CSS Wave Generator

Create beautiful CSS wave backgrounds and section dividers. Pick a wave style and position, layer up to four solid or gradient waves over a solid, gradient or mesh background, add blur, blend modes and animation, then copy pure CSS instantly.

How to Create a CSS Wave Background

  1. 1Pick a wave style — Smooth, Curved, Organic, Layered, Diagonal, Double, Soft, or draw your own with Custom.
  2. 2Choose where the wave sits (bottom, top, left or right) and adjust its height, amplitude, frequency and smoothness.
  3. 3Set the background to a solid colour, a linear/radial/conic gradient or a mesh gradient.
  4. 4Add up to four wave layers, each with its own solid or gradient fill and opacity, plus optional blur, blend mode and animation.
  5. 5Copy the CSS and HTML, or download the design as an SVG.

Frequently Asked Questions

Put the class on any element: the generated CSS paints the background on the element and draws the waves on a ::before layer using inline SVG data URIs, so there are no image files or extra markup to manage.

Yes. Enable Animation to make the waves flow continuously. Each layer's background-position shifts by exactly one tile per loop, so the motion is seamless, alternate layers move at different speeds, and the animation switches off for visitors who prefer reduced motion.

Use a small height (around 15–20%), a solid background matching your section, and one or two layers in the next section's colour — or load the Section Divider example and adjust it.

The CSS output is best on the web: it scales to any width and keeps content crisp above the waves. Turn on Export as SVG or use Download when you need a standalone image for design tools or other platforms.

Yes — switch any layer to a gradient fill and set the wave angle. While animating, the gradient runs straight along or across the wave so the loop stays seamless.

Related Tools

More free CSS generators you might like.

CSS Pattern Generator

Create dots, grids, stripes and geometric backgrounds.

Gradient Generator

Create beautiful, animated CSS gradients visually.

Mesh Gradient Generator

Design vibrant mesh gradients visually.

Border

CSS Gradient Border Generator

Design rounded, animated and glowing gradient borders.