Gradient
v1.1+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 forbackground-clip
CSS attribute. Useful when creating text gradients.backgroundClip
: the typicalbackground-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.
<Boxw='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
<Boxw='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
.
<TextbgGradient='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.
<Boxw='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.
<Boxas='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>