Background-clip: text

Overview

Background clip text is a non-standard method of clipping a background image to the foreground text.

Formal Definition

Specifications

CSS Backgrounds and Borders Module Level 4 # background-clip

Syntax

/* Keyword values */
 background-clip: border-box;
 background-clip: padding-box;
 background-clip: content-box;
 background-clip: text;
 /* Global values */
 background-clip: inherit;
 background-clip: initial;
 background-clip: revert;
 background-clip: unset;

Code snippets

20220617.html

Source:20220617.html

style.css

Source:style.css

background-clip-text.html

Source:background-clip-text.html

Browser Compatibility