Gradients

Cerberus provides a set of predefined gradients that can be used in both design and development.

Usage

To apply a gradient in code, just use the cerbGradient utility in any of your style objects.

1
<div className={css({ cerbGradient: 'yellow' })}>
2
This is a yellow gradient
3
</div>

Options

  • light purple

    Gradient Fills/light-purple

    light-purple
  • dark purple

    Gradient Fills/dark-purple

    dark-purple
  • green

    Gradient Fills/green

    green
  • light blue

    Gradient Fills/light-blue

    light-blue
  • red

    Gradient Fills/red

    red
  • neutral

    Gradient Fills/neutral

    neutral
  • yellow

    Gradient Fills/yellow

    yellow
  • teal

    Gradient Fills/teal

    teal
  • light teal

    Gradient Fills/light-teal

    light-teal

On this page