Components
CrystalGradientText
Inline gradient text using Crystal accent tokens.
CrystalGradientText renders text with a linear gradient from accent-primary to accent-secondary. The gradient adapts automatically to the active Crystal theme. Polymorphic via the as prop.
Import
import { CrystalGradientText } from '@artasce/crystal-ui';Usage
<CrystalGradientText>Intelligent</CrystalGradientText>Props
CrystalGradientText Props
| Token | Variable | Value |
|---|---|---|
children | React.ReactNode | (required) |
as | 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'strong' | 'span' |
className | string | — |
style | React.CSSProperties | — |
Values update live with theme changes. Click any row to copy the CSS variable.
Examples
Hero Metric
<CrystalGradientText as="span" className="text-6xl font-bold">
$4M
</CrystalGradientText>Section Heading
<h2 className="text-4xl font-bold">
Let's Build Something{' '}
<CrystalGradientText>Intelligent</CrystalGradientText>
</h2>Different Elements
<CrystalGradientText as="h1" className="text-7xl font-bold tracking-tight">
Crystal Design System
</CrystalGradientText>
<CrystalGradientText as="strong">Featured</CrystalGradientText>How It Works
The gradient uses CSS background-clip: text with -webkit-text-fill-color: transparent:
background: linear-gradient(
135deg,
var(--crystal-color-crystal-accent-primary),
var(--crystal-color-crystal-accent-secondary)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;Each theme defines different accent colors, so the gradient shifts automatically:
- Diamond: Blue to light blue
- Tanzanite: Violet to fuchsia
- Garnet: Red to amber
- Amethyst: Purple to violet
Theme Comparison
Theme Comparison
diamond
Primary
Accent
onyx
Primary
Accent
garnet
Primary
Accent
sapphire
Primary
Accent