Background Clip

Utilities for controlling the bounding box of an element's background.

React propsCSS Properties
backgroundClip={keyword}background-clip: {keyword};

Usage

Use the backgroundClip={keyword} utilities to control the bounding box of an element's background.

<x.div backgroundClip="border-box" p={6} bg="indigo-600" border={4} borderColor="indigo-300" borderStyle="dashed" /> <x.div backgroundClip="padding-box" p={6} bg="indigo-600" border={4} borderColor="indigo-300" borderStyle="dashed" /> <x.div backgroundClip="content-box" p={6} bg="indigo-600" border={4} borderColor="indigo-300" borderStyle="dashed" />

Cropping to text

Use backgroundClip="text" to crop an element's background to match the shape of the text. Useful for effects where you want a background image to be visible through the text.

<x.div fontSize="5xl" fontWeight="extrabold"> <x.span backgroundClip="text" color="transparent" backgroundImage="gradient-to-r" gradientFrom="emerald-500" gradientTo="light-blue-500" > Hello world </x.span> </x.div>

Responsive

To control the background attachment of an element at a specific breakpoint, use responsive object notation. For example, adding the property backgroundAttachment={{ md: "scroll" }} to an element would apply the backgroundAttachment="scroll" utility at medium screen sizes and above.

<x.div backgroundAttachment={{ md: 'scroll' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub