Wavy Backgrounds with CSS & SVG

Wavy backgrounds have been all the rage in design for the last few years. The following tutorial demonstrates several different ways to create wavy backgrounds with CSS and SVG.

CSS Versions

Bubble Pattern

CSS Bubble

CSS Bubble

The bubble pattern creates an elliptical shape that stretches over the top of the content. It only requires CSS to create the effect.

file_type_html index.html
    <section class="bubble">
      <!-- content here -->
    </section>

Use the pseudo-element ::after to style an eliptical border radius to the content.

file_type_css style.css
.bubble::after {
    content: '';
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 100%;
    background-color: #0f0f10;
    height: 85%;
}

Wave Pattern

CSS Wave

CSS Wave

The wave pattern overlaps two epliptical pseudo-elements. It it difficult to get the positioning perfect, but it will work well enough for most cases.

file_type_html index.html
    <section>
      <!-- content here -->
      <div class="curve"></div>
    </section>
file_type_css style.css
section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
    padding-top: 100px;
    background: #3c31dd;
}

.curve {
    position: absolute;
    height: 250px;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.curve::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    transform: translate(85%, 60%);
    background-color: hsl(216, 21%, 16%);
}

.curve::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    background-color: #3c31dd;
    transform: translate(-4%, 40%);
    z-index: -1;
}

SVG Versions

The following examples create curved and wavy backgrounds using SVG images.

Layered Waves

Layered SVG Wave

Layered SVG Wave

One of the easiest ways to add waves to an element is the ShapeDriver tool. It allows you to create a wave effect generating an SVG path and required CSS code to style it.

To add more complex layered waves, you can use the Haikei app to randomly generate a variety of beautiful waves, blobs, and other shapes. You can use any of these shapes as the background image of an element with CSS. Make sure the aspect ratio of the image matches the SVG exported from the app.

file_type_css style.css
.spacer {
    aspect-ratio: 960/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.layer1 {
    background-image: url('./your-image.svg');
}

Animated Blobs

Animated SVG Blob

Animated SVG Blob

KUTE.js is a JavaScript library that makes it easy to animate SVG elements, or morph one shape into another. The code below can be applied to the paths of an inline SVG.

file_type_html index.html
<svg>
    <path id="blob1" />
    <path id="blob2" style="visibility: hidden" />
</svg>
file_type_js_official app.js
const tween = KUTE.fromTo(
    '#blob1',
    { path: '#blob1' },
    { path: '#blob2' },
    { repeat: 999, duration: 3000, yoyo: true }
).start();

Questions?

Ask questions via GitHub below OR chat on Slack #questions