A Complete Guide to Modern Waves
Tags: javascript, beginners, opensource, css
Published: 2022-10-28 13:29:04

# Introduction

Just about every other website I visit has wave patterns. I have no doubt you've seen them, too, used as dividers between content sections or a subtle background texture. The idea is they add a fluid, non-linear flair to a web design rather than relying on crisp, solid lines between elements.

Gallery of examples ⬇

 - https://markitup.in/
 - https://www.uplabs.com/posts/portfolio-8efd741d-109f-47c5-96d5-1e24ae89b81a
 - https://csshint.com/css-wave-animation/
 - https://digitalocean.com
 - https://theeventscalendar.com
 - https://basecamp.com
 - https://www.helpscout.com
 - https://fauna.com


Waves are a neat pattern! And creating them is pretty darn easy, thanks to the gazillion online generators you can use to spit out SVG you to add directly to your HTML. Here are just a few of them:

- [Shape Divider](https://www.shapedivider.app/)
- [Haikei](https://haikei.app/) 
- [Get Waves](https://getwaves.io/)
- [Softr](https://www.softr.io/tools/svg-wave-generator)
- [SVG Waves](https://svgwave.in/)

Those are great, so use them! At the same time, I think it's a good idea to know how to make something like waves from scratch because it helps us understand the code we're using.

And there's more than one way to make waves! 🌊

### Using `border-radius` in CSS

The idea here is to make a very large circular shape and position it off the page so only part of it is revealed:

 codepen https://codepen.io/geoffgraham/pen/qBoGedg 

Repeat the element for more waves:

https://codepen.io/geoffgraham/pen/qBoGedg

This certainly works, but you may already see its limitations. For example, we need to know how many ways there are and then use some magic numbers to position everything. 
Maybe we could do something with CSS Grid's `auto-fit` powers so the number of items is less important:

https://codepen.io/geoffgraham/pen/xxWNvXe

Eh, still not the best. What makes this approach so tough is that putting two circles together doesn't really create a wave pattern. So, I'd say `border-radius` is great when we're working with a single shape.

### Using CSS gradients

Yeah! We can totally chain some gradients together with various opacities to make wavey patterns. In fact, Lea Verou's classic ["CSS3 Patterns Gallery"](https://projects.verou.me/css3patterns/#wave) offers a perfect example using a combination of linear and radial gradients:

https://codepen.io/geoffgraham/pen/JjLQPgy

### Using CSS `clip-path` and `mask`

Using `clip-path` and `mask` you can create creative waves and how to look into them.

This example shows you what exactly you can create with clip-path.

<iframe height="300" style="width: 100%;" scrolling="no" title="css clip path - wave" src="https://codepen.io/nicholasnadel/embed/xxwqJLw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/nicholasnadel/pen/xxwqJLw">
  css clip path - wave</a> by nicholasnadel (<a href="https://codepen.io/nicholasnadel">@nicholasnadel</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

This is a way to create waves using a clip path and below is an example of adding creativity with CSS animations.

<iframe height="300" style="width: 100%;" scrolling="no" title="Water Wave Effect Using CSS Clip-path" src="https://codepen.io/muhammad_mabrouk/embed/gOPNLyo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/muhammad_mabrouk/pen/gOPNLyo">
  Water Wave Effect Using CSS Clip-path</a> by Muhammad Mabrouk (<a href="https://codepen.io/muhammad_mabrouk">@muhammad_mabrouk</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

clip-path is not a flexible way to create waves you have to put every pixel or dot but you can create and do amazing work using it. Now there's another way to create waves which is super amazing and easy. Let's look into it.

### Inline SVG

We also have SVG! What I like about this approach is that the SVG can form the shape:

https://codepen.io/geoffgraham/pen/WNzBqwN

Then we have all the flexibility in the world to fill the waves in with whatever color we want in CSS:

https://codepen.io/geoffgraham/pen/bGvyPpX

Or we can drop in a bunch of SVGs and use absolute positioning on them to get a real splashy:

https://codepen.io/ganesh1010/pen/xxWmLvY

### Using SVG in CSS

We can also use SVG as a background image:

https://codepen.io/geoffgraham/pen/NWYVZRW

All we have to do to get multiple waves with the background image approach is to repeat the element a few times in the HTML, then reach for `background-position-x` to space them apart and `opacity` to show the layers:

https://codepen.io/geoffgraham/pen/Yzabomo

And, of course, we can animate those as well. We tweak the `animation-delay` and `animation-duration` of each wave to offset things a bit:

https://codepen.io/geoffgraham/pen/jOzojRB

### Conclusion

There you go, a bunch of ways to make waves! We looked at a bunch of different wave patterns and several approaches for coding them in CSS and SVG. Which approach is best? It really depends on the design and use case, so choose what fits best with your requirements.


### Recent Articles ✍🏻
1. [A Complete Guide to Waves](https://dev.to/patilganesh1010/a-complete-guide-to-waves-bmb)
2. [A Practical Guide to Brain.js](https://dev.to/patilganesh1010/a-practical-guide-to-brainjs-nfk)
3. [DevOps Simplified](https://dev.to/patilganesh1010/devops-simplified-j12)
4. [Wavy Backgrounds with CSS & SVG](https://dev.to/patilganesh1010/wavy-backgrounds-with-css-svg-11ef)
5. [Everything you need to know about Markdown]
(https://dev.to/patilganesh1010/everything-you-need-to-know-about-markdown-1da3)

### Connect with Me
[Twitter](https://twitter.com/ganeshstwt) 
[Github](https://github.com/ganeshpatil386386)

[Youtube]
(https://www.youtube.com/channel/UCjMse2JYXPbtlzcnkbXmVQQ)
[Linkedin](https://www.linkedin.com/in/ganeshpatil386386/)