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

Editable Example

Customizing Colors#

You can use both theme-aware color tokens or raw CSS color values.

Editable Example

Multiple Color Stops#

By adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors.

Editable Example

Following the CSS gradient specification, you can also define the distribution of the color stops

Editable Example

Text Gradient API#

To add a text gradient, pass the bgGradient following the API and bgClip prop to text.

Welcome to Chakra UI

Editable Example

Responsive Gradients#

You can control the responsiveness of gradients by specifying the gradients at the different breakpoints.

Editable Example

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.

Editable Example
Edit this page