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 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