Collection of free CSS background-clip code examples from Codepen and other resources

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!

Hover Text Fill Effects

Hover text fill effects with CSS background-clip.

Menu Hover Fill Text

color + background-clip = awesome.

Background Clip Text

CSS Shapes, Columns and Clipping

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

Animating Striped Text

Animating striped text with background-clip and gradients.

CSS Oceanic Overlays

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.

background-clip Menu

Mask Effect

Mask hover effect.

Playing with background-clip: text and varying text-fill-color Values

Just playing around with background-clip: text.

Clip with Fixed Background

background-clip:text CSS Effect

Animated Text Shadow Pattern

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

Zeppelin