GradientText

A purely presentational component that fills text with a gradient color, implemented with background-clip: text; it defaults to a two-color theme-token gradient and supports arbitrary color-stop arrays and directions. No events.

Basic Usage

Default token gradient (to right)

Gradient Text

Example

Custom Color Stops

Red → blue two colors

Red–Blue Gradient

Example

Three-color gradient

Three-Color Gradient

Example

Direction

direction=to bottom

Top to Bottom

Example

direction=135deg

Diagonal Gradient

Example

API

Attributes

Attribute	Description	Type	Default
direction	Gradient direction (first argument of linear-gradient, e.g. to right, 135deg)	string	—
gradient	JSON color-stop array, e.g. ["#f00","#00f"]; a single stop renders a solid color; missing / invalid values fall back to the default token gradient	string	—

Slots

Name	Description
default	—

• The default gradient uses theme tokens (--oas-color-primary → --oas-color-primary-hover), switching automatically with the light/dark theme — no hardcoded color values.
• Color-stop entries are validated against a whitelist to prevent CSS injection.
• No events; purely presentational.