Blueprint

GuidesFoundationComponentsReleases
⌘K

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 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 primary.200 to secondary.500

live

<Box w="100%" h="200px" bgGradient="linear(to-r, primary.200, secondary.500)" />

Customizing Colors

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

live

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

live

<Box
w="100%"
h="200px"
bgGradient="linear(to-r, neutral.300, warning.400, danger.200)"
/>

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.

live

<Text
bgGradient="linear(to-b, #7928CA, #FF0080)"
bgClip="text"
textStyle="heading500"
fontWeight="heading"
display="inline-flex"
gap="100"
>
Trendy
<Box
as="span"
display="inline-block"
bgGradient="linear(to-b, #7928CA, #FF0080)"
width="27px"
height="25px"
sx={{ maskImage: "url('/images/react-logo.svg')" }}
/>
</Text>

Responsive Gradients

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

live

<Box
w="100%"
h="200px"
bgGradient={[
'linear(to-tr, primary.300, warning.400)',
'linear(to-t, primary.200, secondary.500)',
'linear(to-b, danger.100, primary.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.

live

<Box
as="button"
p={4}
color="white"
fontWeight="bold"
borderRadius="md"
bgGradient="linear(to-r, primary.500, success.500)"
_hover={{
bgGradient: 'linear(to-r, danger.500, warning.500)',
}}
>
Click here
</Box>