Site icon WebArtDeveloper

UNDERLINE CLIP HOVER ANIMATION

Author:

Made with:

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
Exit mobile version