UNDERLINE CLIP HOVER ANIMATION

Author:

  • Marwan Zibaoui
  • February 15, 2020

Made with:

  • HTML / CSS

About the code:

This is a simple and fancy animated underline created using text clipping. The text uses background-clip: text and a linear-gradient background to be bi-color. We get around animating the gradient by animating the background-position instead. We have to use a wrapper element for having the underline highlight under the text since the text color is already the background!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: Yes

Dependencies:

Download Demo and Code

Add a Comment

Your email address will not be published. Required fields are marked *