15 CSS background-clip Examples

About 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!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Hover Text Fill Effects

Hover text fill effects with CSS background-clip.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Menu Hover Fill Text

color + background-clip = awesome.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Background Clip Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Shapes, Columns and Clipping

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Animating Striped Text

Animating striped text with background-clip and gradients.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Oceanic Overlays

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

background-clip Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Mask Effect

Mask hover effect.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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

Just playing around with background-clip: text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Clip with Fixed Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

background-clip:text CSS Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Animated Text Shadow Pattern

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Zeppelin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -