Text Gradient

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-design/react'

function Example() {
  return (
    <Text textGradient="cerberus.dark.charon-dark">
      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-design/react'

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

Live Examples

Here are some examples of text gradients in action:

Available Gradient Tokens

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

• charon-light / charon-dark
• nyx-light / nyx-dark
• amphiaraus-light / amphiaraus-dark
• styx-light / styx-dark
• thanatos-light / thanatos-dark
• hades-light / hades-dark
• asphodel-light / asphodel-dark

Advanced

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

import { cerberus } from '@cerberus-design/react'

function Example() {
  return (
    <cerberus.span
      display="block"
      _cerberusTheme={{
        textGradient: 'cerberus.dark.charon-dark',
      }}
      _acheronTheme={{
        textGradient: 'acheron.dark.charon-dark',
      }}
    >
      Theme-aware gradient text
    </cerberus.span>
  )
}

Style Props Reference

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