Background Clip

Atomic props for controlling the background color of an element.

Atomic Props	CSS Properties
bgClipBorder	background-clip: border-box;
bgClipPadding	background-clip: padding-box;
bgClipContent	background-clip: content-box;
bgClipText	background-clip: text;

bgClipBorder

Result

Loading...

Live Editor

<Box p4> <Box as="span" bgClipBorder p6 bgTeal600 border-4 borderTeal300 borderDashed> Hello world </Box> </Box>

<Box p4>
  <Box as="span" bgClipBorder p6 bgTeal600 border-4 borderTeal300 borderDashed>
    Hello world
  </Box>
</Box>

bgClipPadding

Result

Loading...

Live Editor

<Box p4> <Box as="span" bgClipPadding p6 bgTeal600 border-4 borderTeal300 borderDashed> Hello world </Box> </Box>

<Box p4>
  <Box as="span" bgClipPadding p6 bgTeal600 border-4 borderTeal300 borderDashed>
    Hello world
  </Box>
</Box>

bgClipContent

Result

Loading...

Live Editor

<Box p4> <Box as="span" bgClipContent p6 bgTeal600 border-4 borderTeal300 borderDashed> Hello world </Box> </Box>

<Box p4>
  <Box as="span" bgClipContent p6 bgTeal600 border-4 borderTeal300 borderDashed>
    Hello world
  </Box>
</Box>

bgClipText

Result

Loading...

Live Editor

<Box as="span" fontBold text6XL transparent bgClipText bgGradientX={['red400', 'yellow600']}> Hello world </Box>

<Box as="span" fontBold text6XL transparent bgClipText bgGradientX={['red400', 'yellow600']}>
  Hello world
</Box>