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.
div as the first child of the product features section and make it absolute positioned, also throw a
relative on the
<section id="features" class="relative ..."> <div class="absolute"> <svg>...</svg> </div> </section>
top-0 inset-x-0 to the
You should have something that looks like this:
P.S if your SVG doesn't span the width of the browser, remove the
height attributes from
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
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
Now, 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.