# Wave Edge at the Bottom of Sections

> Gives any Group or Cover block with the class "wpide-wave-bottom" a soft wavy bottom edge instead of a straight line, for friendlier section transitions.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: dividers, sections, design, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-wave-divider/

## Code

```css
.wpide-wave-bottom {
    --wpide-wave-height: 48px;
    padding-bottom: calc(var(--wpide-wave-height) + 1rem) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v30c-150 30-300 30-450 0S450 0 300 30 75 60 0 30z'/%3E%3C/svg%3E") bottom / 100% var(--wpide-wave-height) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--wpide-wave-height) + 1px) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v30c-150 30-300 30-450 0S450 0 300 30 75 60 0 30z'/%3E%3C/svg%3E") bottom / 100% var(--wpide-wave-height) no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - var(--wpide-wave-height) + 1px) no-repeat;
}
```

## Notes

The wave is cut out of the block itself, so the next section's background shows through. Increase --wpide-wave-height for a taller wave.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Wave Edge at the Bottom of Sections" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/