Background Clip

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

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.