Gradient

Atomic props for control the font style of an element.

Atomic Props	CSS Properties
bgGradientX={value}	background-image: linear-gradient(to right, color1, color2);
bgGradientY={value}	background-image: linear-gradient(to bottom, color1, color2);

bgGradientX

Result

Loading...

Live Editor

<Box gap3 toLeft> <Box square20 rounded bgGradientX={['red400', 'yellow400']} /> <Box h20 w-200 rounded bgGradientX={['purple500', 'pink500', 'red500']} /> </Box>

<Box gap3 toLeft>
  <Box square20 rounded bgGradientX={['red400', 'yellow400']} />
  <Box h20 w-200 rounded bgGradientX={['purple500', 'pink500', 'red500']} />
</Box>

hover:

Result

Loading...

Live Editor

<Box cursorPointer h20 w-200 rounded bgGradientX={['green400', 'blue500']} bgGradientX--hover={['pink500', 'yellow500']} />

<Box
  cursorPointer
  h20
  w-200
  rounded
  bgGradientX={['green400', 'blue500']}
  bgGradientX--hover={['pink500', 'yellow500']}
/>

bgGradientY

Result

Loading...

Live Editor

<Box gap3 toLeft> <Box w20 h-160 rounded bgGradientY={['red400', 'yellow400']} /> <Box w20 h-160 rounded bgGradientY={['purple500', 'red500', 'yellow500']} /> </Box>

<Box gap3 toLeft>
  <Box w20 h-160 rounded bgGradientY={['red400', 'yellow400']} />
  <Box w20 h-160 rounded bgGradientY={['purple500', 'red500', 'yellow500']} />
</Box>

active:

Result

Loading...

Live Editor

<Box cursorPointer square20 rounded bgGradientY={['green400', 'blue500']} bgGradientY--active={['pink500', 'yellow500']} />

<Box
  cursorPointer
  square20
  rounded
  bgGradientY={['green400', 'blue500']}
  bgGradientY--active={['pink500', 'yellow500']}
/>