wave ocean maritime border divider animated Section divider with organic feel Maritime or nature-themed hero footer Beach, ocean, water-themed landing pages Boring straight section dividers Need organic, flowing transitions between sections
Wave Border
Fetch snippet JSON:
curl https://webspire.de/snippets/atmosphere/wave-border.json Atmosphere
Wave Border
Organic wave edge at the section bottom.
Background
Customize
Quick Start
<section class="wave-border bg-sky-50 py-20">Content above waves</section>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Features
- Dark Mode Responsive
- A11y
- prefers-reduced-motion, prefers-color-scheme
- Size
- 717 bytes · 40 lines
- Custom Properties
-
--wave-color--wave-height--wave-speed - Classes
-
.wave-border
wave ocean maritime border divider animated
Animated wave border using a pseudo-element with border-radius and horizontal sway animation. The wave sits at the bottom of the container, creating a natural transition to the next section. Configurable color, height, and speed.