The CSS `-webkit-background-clip` property

The vendor-prefixed form of `background-clip`, still commonly included for reliable gradient text rendering.

433 effects in the catalog use this property.

Syntax

-webkit-background-clip: text;

Watch out

Although standard `background-clip: text` is widely supported, some WebKit versions only recognize the prefixed form. Writing both costs almost nothing.

Effects using -webkit-background-clip

All CSS properties

These are working effects from the catalog. Open a tile to inspect the full source.

Bloom Vapor Sliderrange-bloom-vapor

Bicolor Gradienttext-bicolor-gradient

Chevron Arrowstext-chevron-arrows

Fade Depthtext-fade-depth

Torch Passtext-torch-pass

Burlap Coarsetext-burlap-coarse

Cloud Cover Greytext-cloud-cover-grey

Color Blocks Threetext-color-blocks-three

background-clip435 -webkit-text-fill-color249

Syntax

Effects using -webkit-background-clip

Related properties