Create Wavy Underline in just 2 lines

Create Wavy Underline in just 2 lines


1 min read


These days making websites good looking has become a tough job for web developers/designers. So in this article, I am going to show a simple CSS trick to make text little beautiful.

Wavy Underline

Creating a wavy underline is not at all a difficult task, there is no need of any advance CSS methods. We will only deal with just two simple CSS properties. Let's make %%[wavy].

  text-decoration: underline;
  text-decoration-style: wavy;

and you made it 🎉

This is how wavy 〰️ underline would look like

If you wonder about the colored wavy 〰️ underline 🤔

  text-decoration-color: #FFD700; 


I have picked some cool things done with wavy 〰️ underline from the internet so that, you can have a great inspiration of it and make amazing stuffs of your imagination.

Animated Wavy 〰️ underline


Here's a list of practical applications of wavy 〰️ underline.


I hope you have find this article helpful to you. Thank you for reading!

Let’s connect

Fuel ⛽ my work with coffees :)