Ideas for Distorted Link Effects on Menus

Some examples of how to use decorative distortion effects on big typography menu links.

By Manoela Ilic in Playground on
Demo Code

After exploring some distortion effects on line elements for links, I couldn’t wait but try them on some big style menus. So here is a little set of demos that shows some ideas for how to use those distortion effects. They were a great excuse to play with some of my favorite typefaces available on Adobe Fonts including Bely Display, Freight and Rigatoni.

How about a tiny squiggly line under an outlined text:

Or some distortion on a thick line with a gradient:

Or maybe two lines hugging the lovely Rigatoni typeface:

Let’s put that swirly line in front of a sexy serif:

Or be bold and make a strong contrasty box with a wave inside:

Check out all the demos here.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

I really hope you enjoy these styles and find them useful!

Please share your creations with me on Twitter @codrops!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

distortion filter hover line link svg typography

Image To Grid Transition

How to Create a PS1-Inspired Jitter Shader with React-Three-Fiber

Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.