Wavey section dividers add a lot of creative flare to a landing page! I personally use haikei.app to generate the waves for use on my websites.
fffuel.co is also a great resource for generating waves.
Today I'll show you how you can build a wavey section divider using TailwindCSS and CSS transformations.
Let's start by generating our wavey divider on Haikei:
Typically I like to use less complex, less contrasty waves. In this example I set the background color of the wave section to #0066FF. It's important that you set the background color to transparent (in Haikei). The reason for this will become clear when we implement the wave.
Now, let's build a basic landing page (in Tailwind Play)!
<html>
<body>
<main>
<section id="hero" class="bg-slate-900 p-6 h-[75vh] flex flex-col justify-center gap-y-2">
<div class="container mx-auto">
<h1 class="text-3xl text-white font-semibold">SaaS</h1>
<p class="text-white">The best SaaS on the market.</p>
</div>
</section>
<section id="features" class="bg-[#0066FF] p-6 h-[75vh]">
<div class="container mx-auto text-center">
<h2 class="text-2xl font-semibold text-white">Product features</h2>
<p class="text-white">...</p>
</div>
</section>
</main>
</body>
</html>
Now let's add in our SVG from Haikei. You can do this in two ways:
- Copy the SVG code and directly paste it in your HTML
- Add the SVG to your project and reference it in an img tag
Both ways are valid, for this tutorial I'll use the direct SVG-to-HTML method because it's easier.
Add a div as the first child of the product features section and make it absolute positioned, also throw a relative on the section tag:
<section id="features" class="relative ...">
<div class="absolute">
<svg>...</svg>
</div>
</section>
Now add top-0 inset-x-0 to the div with absolute.
You should have something that looks like this:
P.S if your SVG doesn't span the width of the browser, remove the width and height attributes from svg.
It's almost there... but also not.
To fix this, we're going to use CSS transformations.
I like to think of transforms as "nudging" elements into their right spots. Unlike using top-*, right-*, etc, CSS transforms don't actually change the natural flow of elements on a page and are purely visual, this is great for fixing an issue like this.
Add the following utilities to our div with absolute:
transform -translate-y-fullNow, just one last step, we need to add relative z-10 to our product features section. This is because in HTML/CSS, markup that comes first gets the higher stacking order and in this case, our hero section will mask over the wave SVG.
That's it! We now have a really cool, wavey SVG divider.
