Underline Clip Hover Animation

15.02.2020

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

View Code

PlaceholderUnderline Clip Hover Animation

Hover Text Fill Effects

19.01.2020

Hover text fill effects with CSS background-clip.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderHover Text Fill Effects

Menu Hover Fill Text

24.12.2019

color + background-clip = awesome.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderMenu Hover Fill Text

Background Clip Text

1.10.2018

Made with: HTML,CSS

View Code

Background Clip Text

Css Shapes, Columns And Clipping

27.06.2018

An experimentation with CSS columns, CSS Shapes, clip-path and background-clip.

Made with: HTML,CSS (SCSS)

View Code

Css Shapes, Columns And Clipping

Animating Striped Text

25.06.2018

Animating striped text with background-clip and gradients.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderAnimating Striped Text

Css Oceanic Overlays

24.05.2018

Made with: HTML,CSS (SCSS)

View Code

PlaceholderCss Oceanic Overlays

Visualizing Background-Clip

26.01.2018

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

View Code

Visualizing Background-Clip

Background-Clip Menu

6.12.2017

Made with: HTML,CSS

View Code

PlaceholderBackground-Clip Menu

Mask Effect

10.08.2017

Mask hover effect.

Made with: HTML,CSS

View Code

Mask Effect

Playing With Background-Clip: Text And Varying Text-Fill-Color Values

12.04.2017

Just playing around with background-clip: text.

Made with: HTML,CSS

View Code

PlaceholderPlaying With Background-Clip: Text And Varying Text-Fill-Color Values

Clip With Fixed Background

30.04.2016

Made with: HTML,CSS

View Code

PlaceholderClip With Fixed Background

Background-Clip:Text Css Effect

4.11.2014

Made with: HTML,CSS (SCSS)

View Code

Background-Clip:Text Css Effect

Animated Text Shadow Pattern

21.12.2013

Uses background-clip: text & linear-gradient to simulate striped text shadow.

Made with: HTML,CSS

View Code

PlaceholderAnimated Text Shadow Pattern

Zeppelin

21.04.2013

Made with: HTML,CSS

View Code

PlaceholderZeppelin