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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel