Underline Clip Hover Animation

See the Pen Underline Clip Hover Animation by RickyMarou (@RickyMarou) on CodePen.

Underline Clip Hover Animation

Description: A fancy animated underline 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!

Browsers: Chrome Edge Firefox Opera Safari

Made with: HTML CSS

Responsive:No

Posted: 15.02.2020

Similar Examples