Skip to main content

Gradient

Examples

Gradient

Code
<Gradient variant="primary-to-right">
  <Box
    style={{
      blockSize: '100px',
      inlineSize: '100px'
    }}
   />
</Gradient>

Dark Gradient

Code
<Gradient variant="dark-to-right">
  <Box
    style={{
      blockSize: '100px',
      inlineSize: '100px'
    }}
   />
</Gradient>

As Image Overlay

Masked woman with sticker on arm
Code
<Box
  style={{
    inlineSize: '500px'
  }}
>
  <Gradient variant="primary-to-right">
    <Image
      alt="Masked woman with sticker on arm"
      height={603}
      src="/design-system/docs/images/example-image-gradient.jpg"
      width={700}
    />
  </Gradient>
</Box>

Props

variant

Join<["dark", "to-right"] | ["primary", "to-right"] | ["primary", "to-left"] | ["primary", "fade-out"], "-">

Indicates which variant of the gradient to use

className

string

The className property sets the value of the class attribute of the element.