Leave Yamada UI a star

Star
Yamada UIYamada UIv1.4.2

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',
}
Copied!

Editable example

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

Color Customization

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

Editable example

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

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)",
}
Copied!

Editable example

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

Text Gradient

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

Editable example

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

Responsive Gradient

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

Editable example

<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)",
  }}
/>
Copied!

Edit this page on GitHub

PreviousAnimationNextSemantic Tokens