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

Creator

  • Marwan Zibaoui

Programming language

  • HTML / CSS

Information a code

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!

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Katherine Kato

Programming language

  • HTML / CSS (SCSS)

Information a code

Hover Text Fill Effects

Hover text fill effects with CSS background-clip.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • alphardex

Programming language

  • HTML / CSS (SCSS)

Information a code

Menu Hover Fill Text

color + background-clip = awesome.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Background Clip Text

Creator

  • Steve

Programming language

  • HTML / CSS

Information a code

Background Clip Text

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: CSS Shapes, Columns and Clipping

Creator

  • Mandy Michael

Programming language

  • HTML / CSS (SCSS)

Information a code

CSS Shapes, Columns and Clipping

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Mandy Michael

Programming language

  • HTML / CSS (SCSS)

Information a code

Animating Striped Text

Animating striped text with background-clip and gradients.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Shaw

Programming language

  • HTML / CSS (SCSS)

Information a code

CSS Oceanic Overlays

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Visualizing background-clip

Creator

  • George W. Park

Programming language

  • HTML / CSS

Information a code

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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Andr√© Cortellini

Programming language

  • HTML / CSS

Information a code

background-clip Menu

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Mask Effect

Creator

  • Alex Tkachev

Programming language

  • HTML / CSS

Information a code

Mask Effect

Mask hover effect.

Browser Support: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Melissa Em

Programming language

  • HTML / CSS

Information a code

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

Just playing around with background-clip: text.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Richard

Programming language

  • HTML / CSS

Information a code

Clip with Fixed Background

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: background-clip:text CSS Effect

Creator

  • Jintos

Programming language

  • HTML / CSS (SCSS)

Information a code

background-clip:text CSS Effect

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • carpe numidium

Programming language

  • HTML / CSS

Information a code

Animated Text Shadow Pattern

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • simurai

Programming language

  • HTML / CSS

Information a code

Zeppelin

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: