Home > Tips & Tricks > Gradient Underlines with CSS

Gradient Underlines with CSS

This trick will show you how you can style the text underlines with a gradient color using a simple couple of lines of CSS.

I will show you the two cases of underlines, the one is normal text underlining and the second is when hovering on the anchor link.

Gradient Underlines with CSS

See the following HTML and CSS code for reference or you can check the codepen example code snippet.

HTML

CSS

Codepen

See the Pen
Gradient Underlines with CSS
by Aman Mehra (@amanmehra)
on CodePen.

Being Tricky 😉

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment