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 forbackground-clipCSS attribute. Useful when creating text gradients.backgroundClip: the typicalbackground-clipCSS 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 primary.200 to secondary.500
Customizing Colors
You can use both theme-aware color tokens or raw CSS color values.
Multiple Color Stops
By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors.
Following the CSS gradient specification, you can also define the distribution of the color stops
<Box live w="100%" h="200px" bgGradient="linear(danger.100 0%, secondary.100 25%, warning.100 50%)"/>
Text Gradient
To add a text gradient, pass the bgGradient following the API and bgClip
prop to text.
Responsive Gradients
You can control the responsiveness of gradients by specifying the gradients at the different breakpoints.
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.