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>