TailwindreadyTailwindready
Free tool

SVG Wave Generator

Shape a wave, stack up to three layers, and copy the SVG. It uses currentColor, so a Tailwind text color class recolors it, and it stretches to the full width of its section.

Layers
Fill from
SVG (use it inline, color comes from the text-* class)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none" class="block w-full h-32 text-cyan-700" fill="currentColor" aria-hidden="true">
  <path d="M-518.4,137.5 C-338.4,137.5 -338.4,217.5 -158.4,217.5 C21.6,217.5 21.6,137.5 201.6,137.5 C381.6,137.5 381.6,217.5 561.6,217.5 C741.6,217.5 741.6,137.5 921.6,137.5 C1101.6,137.5 1101.6,217.5 1281.6,217.5 C1461.6,217.5 1461.6,137.5 1641.6,137.5 C1821.6,137.5 1821.6,217.5 2001.6,217.5 C2181.6,217.5 2181.6,137.5 2361.6,137.5 L2361.6,320 L-518.4,320 Z" fill-opacity="0.55"/>
  <path d="M-720,110 C-540,110 -540,210 -360,210 C-180,210 -180,110 0,110 C180,110 180,210 360,210 C540,210 540,110 720,110 C900,110 900,210 1080,210 C1260,210 1260,110 1440,110 C1620,110 1620,210 1800,210 C1980,210 1980,110 2160,110 L2160,320 L-720,320 Z"/>
</svg>

Frequently asked questions

How do I add a wave divider between sections in Tailwind?

Paste the SVG at the bottom of the first section, make it block w-full h-32, and give it a text color that matches the next section's background. Because it uses currentColor, text-white or text-gray-50 does the job.

Why is there a gap under my SVG?

Inline SVGs are inline elements, which leaves a small gap below them. Add the block class, which is already included in the generated code.

How does preserveAspectRatio none help?

It lets the wave stretch to any width and height you set with Tailwind classes, instead of keeping its original proportions. Change h-32 to make the wave taller or flatter.

Can I animate the wave?

Yes. Place two copies side by side and move them with a CSS animation, or use the animation generator to make a slow translate. Respect motion-reduce for users who prefer less movement.

Guides that go with this tool

More free Tailwind CSS tools

Blob generatorRandom organic SVG blobs with a repeatable seed.Clip-path generatorDrag polygon points and copy the clip-path.CSS pattern generatorDots, grids, stripes and checkerboards in pure CSS.Scrollbar generatorCustom scrollbar styles for Chrome, Safari and Firefox.SVG to data URIEncode SVG for CSS, img tags and Tailwind backgrounds.Tailwind class cleanerDedupe, sort and find conflicts in a class list.

Browse all 34 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Blob generatorClip-path generatorBrowse components