Underline Clip Hover Animation
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!
Made with: HTML,CSS
Hover Text Fill Effects
Hover text fill effects with CSS background-clip.
Made with: HTML,CSS (SCSS)
Css Shapes, Columns And Clipping
An experimentation with CSS columns, CSS Shapes, clip-path and background-clip.
Made with: HTML,CSS (SCSS)
Animating Striped Text
Animating striped text with background-clip and gradients.
Made with: HTML,CSS (SCSS)
Visualizing Background-Clip
This example shows how the CSS background-clip property can be used to define how an element's background is applied within the element's box.
Made with: HTML,CSS
Playing With Background-Clip: Text And Varying Text-Fill-Color Values
Just playing around with background-clip: text.
Made with: HTML,CSS
Animated Text Shadow Pattern
Uses background-clip: text & linear-gradient to simulate striped text shadow.
Made with: HTML,CSS
