Gradients#

Usage#

Gradients can be applied via style props, the styled function or the applyTheme function.

Using style props#

Editable example

<Box
  gradientFrom="primary"
  gradientTo="secondary"
  height="100px"
  width="100%"
/>
<Box
  gradientFrom="primary"
  height="100px"
  width="100%"
/>

<Box
  gradientFrom="primary"
  gradientTo="secondary"
  height="100px"
  width="100%"
/>
<Box
  gradientFrom="primary"
  height="100px"
  width="100%"
/>

Using `styled`#

Editable example

const GradientBox = styled(Box)`
  ${gradient({ from: 'primary', to: 'secondary' })};
  height: 100px;
  width: 100%;
`;

function Example() {
  return (
    <GradientBox />
  );
}

render(Example)

const GradientBox = styled(Box)`
  ${gradient({ from: 'primary', to: 'secondary' })};
  height: 100px;
  width: 100%;
`;

function Example() {
  return (
    <GradientBox />
  );
}

render(Example)

Using `applyTheme`#

Editable example

const GradientBox = applyTheme(Box, {
  defaultProps: {
    gradientFrom: 'primary',
    gradientTo: 'secondary',
    width: '100%',
    height: '100px'
  }
});

function Example() {
  return (
    <GradientBox />
  );
}

render(Example)

const GradientBox = applyTheme(Box, {
  defaultProps: {
    gradientFrom: 'primary',
    gradientTo: 'secondary',
    width: '100%',
    height: '100px'
  }
});

function Example() {
  return (
    <GradientBox />
  );
}

render(Example)

Middle colors#

You can specify a middle color with the gradientVia prop.

Editable example

<Box
  gradientFrom="primary"
  gradientVia="red"
  gradientTo="secondary"
  height="100px"
  width="100%"
/>

<Box
  gradientFrom="primary"
  gradientVia="red"
  gradientTo="secondary"
  height="100px"
  width="100%"
/>

Text#

Bumbag UI

Editable example

<Text
  gradientFrom="primary"
  gradientTo="secondary"
  fontSize="900"
  fontWeight="900"
>
  Bumbag UI
</Text>

<Text
  gradientFrom="primary"
  gradientTo="secondary"
  fontSize="900"
  fontWeight="900"
>
  Bumbag UI
</Text>

Stops#

Editable example

<Box
  gradientFrom="primary"
  gradientFromAt="0%"
  gradientVia="red"
  gradientViaAt="80%"
  gradientTo="secondary"
  gradientToAt="100%"
  height="100px"
  width="100%"
/>

<Box
  gradientFrom="primary"
  gradientFromAt="0%"
  gradientVia="red"
  gradientViaAt="80%"
  gradientTo="secondary"
  gradientToAt="100%"
  height="100px"
  width="100%"
/>

Responsive gradients#

Gradients can also be responsive if you supply a breakpoint object as the CSS prop value.

Editable example

<Box
  gradientDirection={{ default: 'right', mobile: 'bottom' }}
  gradientFrom="primary"
  gradientTo={{ default: 'secondary', mobile: 'success' }}
  height="100px"
  width="100%"
/>

<Box
  gradientDirection={{ default: 'right', mobile: 'bottom' }}
  gradientFrom="primary"
  gradientTo={{ default: 'secondary', mobile: 'success' }}
  height="100px"
  width="100%"
/>

Pseudo gradients#

Gradients are also supported on pseudo props (such as: _hover, _hoveractive and _focus).

Hover#

Editable example

<Box
  gradientFrom="primary"
  gradientTo="secondary"
  _hover={{ gradientTo: 'red' }}
  height="100px"
  width="100%"
/>

<Box
  gradientFrom="primary"
  gradientTo="secondary"
  _hover={{ gradientTo: 'red' }}
  height="100px"
  width="100%"
/>

Hover while active#

Editable example

<Box
  gradientDirection="bottom"
  gradientFrom="primary"
  gradientTo="secondary"
  _hover={{ gradientTo: 'secondary600' }}
  _hoveractive={{ gradientTo: 'red' }}
  height="100px"
  width="100%"
/>

<Box
  gradientDirection="bottom"
  gradientFrom="primary"
  gradientTo="secondary"
  _hover={{ gradientTo: 'secondary600' }}
  _hoveractive={{ gradientTo: 'red' }}
  height="100px"
  width="100%"
/>

Focus#

Editable example

<Clickable
  focusable
  gradientDirection="bottom"
  gradientFrom="primary"
  gradientTo="secondary"
  _focus={{ gradientFrom: 'red' }}
  _hover={{ gradientTo: 'secondary600' }}
  _hoveractive={{ gradientTo: 'secondary700' }}
  height="100px"
  width="100%"
/>

<Clickable
  focusable
  gradientDirection="bottom"
  gradientFrom="primary"
  gradientTo="secondary"
  _focus={{ gradientFrom: 'red' }}
  _hover={{ gradientTo: 'secondary600' }}
  _hoveractive={{ gradientTo: 'secondary700' }}
  height="100px"
  width="100%"
/>

On this page

Gradients#

Usage#

Using style props#

Using styled#

Using applyTheme#

Middle colors#

Text#

Stops#

Responsive gradients#

Pseudo gradients#

Hover#

Hover while active#

Focus#

Using `styled`#

Using `applyTheme`#