Gradient

Gradients are a way to have transition between two or more colors. You can add gradient support using any of the following style props.

• bgGradient: a shorthand, convenient style prop to apply theme-aware gradients.
• bgClip: a shorthand for background-clip CSS attribute. Useful when creating text gradients.
• backgroundClip: the typical background-clip CSS attribute. Useful when creating text gradients.

Background Gradient API

To add a gradient to an element, pass the bgGradient prop and set its value following the API:

• linear(<direction>, <from>, <to>)
• radial(<from>, <to>)

You can also use other CSS gradient types like repeating-linear, conic, etc.

For linear gradients, the <direction> can be set to the default CSS directions (e.g. to top) or the shorthand equivalent (e.g to-t).

Here's the list of supported direction shorthands and their respective values:

{
  "to-t": "to top",
  "to-tr": "to top right",
  "to-r": "to right",
  "to-br": "to bottom right",
  "to-b": "to bottom",
  "to-bl": "to bottom left",
  "to-l": "to left",
  "to-tl": "to top left"
}

Usage

Let's create a simple gradient from green.200 to pink.500

<Box w='100%' h='200px' bgGradient='linear(to-r, green.200, pink.500)' />

Customizing Colors

You can use both theme-aware color tokens or raw CSS color values.

<Box w='100%' h='200px' bgGradient='linear(to-l, #7928CA, #FF0080)' />

Multiple Color Stops

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors.

<Box
  w='100%'
  h='200px'
  bgGradient='linear(to-r, gray.300, yellow.400, pink.200)'
/>

Following the CSS gradient specification, you can also define the distribution of the color stops

<Box
  w='100%'
  h='200px'
  bgGradient='linear(red.100 0%, orange.100 25%, yellow.100 50%)'
/>

Text Gradient API

To add a text gradient, pass the bgGradient following the API and bgClip prop to text.

<Text
  bgGradient='linear(to-l, #7928CA, #FF0080)'
  bgClip='text'
  fontSize='6xl'
  fontWeight='extrabold'
>
  Welcome to Chakra UI
</Text>

Responsive Gradients

You can control the responsiveness of gradients by specifying the gradients at the different breakpoints.

<Box
  w='100%'
  h='200px'
  bgGradient={[
    'linear(to-tr, teal.300, yellow.400)',
    'linear(to-t, blue.200, teal.500)',
    'linear(to-b, orange.100, purple.300)',
  ]}
/>

Changing gradient with pseudo props

You can change the gradient of an element based on common CSS pseudo attributes (hover, focus, active, etc).

For example, on hover, add the gradient you wish to have.

<Box
  as='button'
  p={4}
  color='white'
  fontWeight='bold'
  borderRadius='md'
  bgGradient='linear(to-r, teal.500, green.500)'
  _hover={{
    bgGradient: 'linear(to-r, red.500, yellow.500)',
  }}
>
  Click here
</Box>