Text Gradient

JSX style props for applying text gradients using Cerberus tokens

Overview

Text gradients allow you to apply beautiful gradient effects to text content using Cerberus gradient tokens. This is based on the PandaCSS text gradients documentation.

Using textGradient prop

Use the textGradient prop to apply a gradient to text. The gradient tokens follow the pattern [theme].[mode].[variant].

import { Text } from '@cerberus/react'

function Example() {
  return (
    <Text
      textGradient="to-t"
      gradientFrom="gradient.charon-dark.start"
      gradientTo="gradient.charon-dark.end"
    >
      This text has a gradient effect
    </Text>
  )
}

Using Cerberus Factory

The Cerberus factory provides a convenient way to apply text gradients with inline styles:

import { cerberus } from '@cerberus/react'

function Example() {
  return (
    <cerberus.span
      textGradient="to-t"
      gradientFrom="gradient.charon-dark.start"
      gradientTo="gradient.charon-dark.end"
    >
      This is gradient text using the factory
    </cerberus.span>
  )
}

Live Examples

Here are some examples of text gradients in action:

Charon Dark Gradient

This text uses the Charon light gradient variant.

Nyx dark gradient creates a striking effect.

Amphiaraus light gradient for subtle elegance.

import { cerberus } from '@cerberus/react'
import { css } from 'styled-system/css'

export default function TextGradientPreview() {
  return (
    <cerberus.div display="flex" flexDirection="column" gap="4" padding="6">
      <cerberus.h3
        textStyle="h3"
        textGradient="to-b"
        gradientFrom="gradient.charon-dark.start"
        gradientTo="gradient.charon-dark.end"
      >
        Charon Dark Gradient
      </cerberus.h3>

      <p
        className={css({
          textStyle: 'body-lg',
          textGradient: 'to-b',
          gradientFrom: 'gradient.charon-light.start',
          gradientTo: 'gradient.charon-light.end',
        })}
      >
        This text uses the Charon light gradient variant.
      </p>

      <p
        className={css({
          textStyle: 'heading-md',
          textGradient: 'to-b',
          gradientFrom: 'gradient.nyx-dark.start',
          gradientTo: 'gradient.nyx-dark.end',
        })}
      >
        Nyx dark gradient creates a striking effect.
      </p>

      <p
        className={css({
          textStyle: 'body-lg',
          textGradient: 'to-b',
          gradientFrom: 'gradient.amphiaraus-light.start',
          gradientTo: 'gradient.amphiaraus-light.end',
        })}
      >
        Amphiaraus light gradient for subtle elegance.
      </p>
    </cerberus.div>
  )
}

Available Gradient Tokens

Cerberus provides several gradient variants, each available in light and dark modes:

View the cerberus gradients

Advanced

For theme-aware gradients, you can use conditional styles directly on the cerberus factory:

import { cerberus } from '@cerberus/react'

function Example() {
  return (
    <cerberus.span
      display="block"
      _cerberusTheme={{
        textGradient="to-b"
        gradientFrom="gradient.charon-dark.start"
        gradientTo="gradient.charon-dark.end"
      }}
      _acheronTheme={{
        textGradient="to-t"
        gradientFrom="gradient.charon-light.start"
        gradientTo="gradient.charon-light.end"
      }}
    >
      Theme-aware gradient text
    </cerberus.span>
  )
}

Style Props Reference

Prop	CSS Property	Token Category
`textGradient`	`background-image`, `background-clip`	`gradients`

Implementation Notes

Text gradients use background-image with background-clip: text to achieve the effect
The text becomes transparent and the background gradient shows through
Works best with bold or medium font weights for better visibility
Supports theme-aware gradients that adapt to light/dark modes

On this page

Edit this page on Github

Using textGradient prop

Use the textGradient prop to apply a gradient to text. The gradient tokens follow the pattern [theme].[mode].[variant].

import { Text } from '@cerberus/react'

function Example() {
  return (
    <Text
      textGradient="to-t"
      gradientFrom="gradient.charon-dark.start"
      gradientTo="gradient.charon-dark.end"
    >
      This text has a gradient effect
    </Text>
  )
}

Using Cerberus Factory

The Cerberus factory provides a convenient way to apply text gradients with inline styles:

import { cerberus } from '@cerberus/react'

function Example() {
  return (
    <cerberus.span
      textGradient="to-t"
      gradientFrom="gradient.charon-dark.start"
      gradientTo="gradient.charon-dark.end"
    >
      This is gradient text using the factory
    </cerberus.span>
  )
}

Live Examples

Here are some examples of text gradients in action:

Charon Dark Gradient

This text uses the Charon light gradient variant.

Nyx dark gradient creates a striking effect.

Amphiaraus light gradient for subtle elegance.

import { cerberus } from '@cerberus/react'
import { css } from 'styled-system/css'

export default function TextGradientPreview() {
  return (
    <cerberus.div display="flex" flexDirection="column" gap="4" padding="6">
      <cerberus.h3
        textStyle="h3"
        textGradient="to-b"
        gradientFrom="gradient.charon-dark.start"
        gradientTo="gradient.charon-dark.end"
      >
        Charon Dark Gradient
      </cerberus.h3>

      <p
        className={css({
          textStyle: 'body-lg',
          textGradient: 'to-b',
          gradientFrom: 'gradient.charon-light.start',
          gradientTo: 'gradient.charon-light.end',
        })}
      >
        This text uses the Charon light gradient variant.
      </p>

      <p
        className={css({
          textStyle: 'heading-md',
          textGradient: 'to-b',
          gradientFrom: 'gradient.nyx-dark.start',
          gradientTo: 'gradient.nyx-dark.end',
        })}
      >
        Nyx dark gradient creates a striking effect.
      </p>

      <p
        className={css({
          textStyle: 'body-lg',
          textGradient: 'to-b',
          gradientFrom: 'gradient.amphiaraus-light.start',
          gradientTo: 'gradient.amphiaraus-light.end',
        })}
      >
        Amphiaraus light gradient for subtle elegance.
      </p>
    </cerberus.div>
  )
}

Advanced

For theme-aware gradients, you can use conditional styles directly on the cerberus factory:

import { cerberus } from '@cerberus/react'

function Example() {
  return (
    <cerberus.span
      display="block"
      _cerberusTheme={{
        textGradient="to-b"
        gradientFrom="gradient.charon-dark.start"
        gradientTo="gradient.charon-dark.end"
      }}
      _acheronTheme={{
        textGradient="to-t"
        gradientFrom="gradient.charon-light.start"
        gradientTo="gradient.charon-light.end"
      }}
    >
      Theme-aware gradient text
    </cerberus.span>
  )
}

Prop

CSS Property

Token Category

textGradient

background-image, background-clip

gradients