Gradient

Yamada UI provides an API to easily create gradients.

Usage

To add a gradient, set the value according to the bgGradient API.

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

You can also use other CSS gradient functions such as repeating-linear and conic.

Shorthand is also available for <direction>.

{
  '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',
}

<Box w="full" h="xs" bgGradient="linear(to-r, purple.500, blue.400)" />

Color Customization

The API can use both color tokens and CSS color values.

<Box w="full" h="xs" bgGradient="linear(to-r, #59a9e1, #f37bdf)" />

Gradient Tokens

Gradient tokens can be defined in the theme.

import { ThemeTokens } from "@yamada-ui/react"

export const gradients: ThemeTokens = {
  blue: "linear(to-r, #132293, #2375b4)",
}

<Box w="full" h="xs" bgGradient="blue" />

Text Gradient

To add a gradient to the text, set text for bgGradient and bgClip.

<Heading
  size="2xl"
  bgGradient="linear(to-r, orange.400, red.500)"
  bgClip="text"
  isTruncated
>
  Thinking about Krillin... Thinking about Krillin!!!!!
</Heading>

Responsive Gradient

You can support responsive styles by passing an object to bgGradient.

<Box
  w="full"
  h="xs"
  bgGradient={{
    base: "linear(to-tr, teal.300, yellow.400)",
    lg: "linear(to-t, blue.200, teal.500)",
    md: "linear(to-b, orange.100, purple.300)",
  }}
/>