Components
Gradient
Apply color gradients to text characters
Applies a color gradient across text characters. Choose from 13 named presets or provide custom hex colors.
Gradient
Run demo
bunx @gridland/demo gradientcurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s gradientInstallation
bunx shadcn@latest add @gridland/gradientUsage
import { Gradient } from "@/components/ui/gradient"<Gradient name="rainbow">Hello World!</Gradient>Examples
Named Presets
Use the name prop to select a built-in gradient.
<Gradient name="rainbow">Rainbow text</Gradient>
<Gradient name="morning">Morning vibes</Gradient>
<Gradient name="passion">Passion gradient</Gradient>Custom Colors
Pass an array of hex colors to create a custom gradient.
<Gradient colors={["#ff6b6b", "#feca57", "#48dbfb"]}>Custom gradient</Gradient>Multiline
Gradients work across multiline text — each line shares the same color stops.
<Gradient name="vice">{"Line one\nLine two\nLine three"}</Gradient>Available Gradients
cristal · teen · mind · morning · vice · passion · fruit · instagram · atlas · retro · summer · pastel · rainbow
API Reference
Gradient
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | - | Text content to apply the gradient to |
name | GradientName | - | Named gradient preset |
colors | string[] | - | Array of hex colors for a custom gradient |
nameandcolorsare mutually exclusive — provide exactly one.
Utility Functions
The component also exports utility functions for programmatic gradient generation.
| Function | Signature | Description |
|---|---|---|
generateGradient | (colors: string[], steps: number) => string[] | Generate an array of interpolated hex colors |
hexToRgb | (hex: string) => { r, g, b } | Convert hex to RGB |
rgbToHex | (rgb: { r, g, b }) => string | Convert RGB to hex |