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

Semantic Type Gradients

type semantic gradient pairs

primary semantic gradientsuccess semantic gradientwarning semantic gradientdanger semantic gradientinfo semantic gradient

Example

type uses token-derived two-stop gradients (dark-theme aware, zero hard-coded colors); when combined with gradient, gradient wins.

Animated Gradient

animated flowing gradient

Flowing gradient slogan

Example

animated + multi-stop

Four-color flowing gradient

Example

animated slides the background position along the gradient axis (palindrome stops + double-width background for a seamless loop); the duration is customizable via --oas-gradient-text-duration, and it stands still automatically under prefers-reduced-motion.

Text Stroke

Gradient + stroke (default token stroke color)

Gradient with stroke

Example

Gradient + custom stroke color

Red–blue gradient, blue strokeSemantic gradient, thin strokeFlowing gradient with stroke

Example

stroke sets the stroke width (only a number + px/em/rem/pt is accepted; invalid values disable the stroke), and stroke-color sets the stroke color. When omitted, the stroke color falls back to the --oas-color-text-primary token, which adapts to the light/dark theme and keeps the outline readable.

The implementation uses double-layer stacking to avoid the compatibility conflict: a mirrored bottom layer paints only the stroke (-webkit-text-stroke + transparent fill) beneath the gradient layer, so the outline shows around the edges without being clipped by background-clip: text. It composes freely with type, gradient, and animated.

Compatibility Notes

• background-clip: text and the transparent color live inside an @supports block: browsers without clip support fall back to the normal text color — no invisible-text accident.
• Text stroke (-webkit-text-stroke) gets clipped when stacked directly with background-clip: text; the component solves this internally with double-layer stacking. Browsers without clip support fall back to stroking the main text directly (normal text color + stroke), so no double-text ghosting appears.
• Multi-line truncation (ellipsis) behaves inconsistently across browsers when combined with background-clip: text; keep gradient text to a single line.

Font Size

Font size follows the outer context (inherited) by default; override with the CSS variable --oas-gradient-text-font (e.g. 18px).

API

oas-gradient-text

Attributes

Attribute	Description	Type	Default
animated	Flowing animation (palindrome stops, seamless loop, period via --oas-gradient-text-duration; static under prefers-reduced-motion)	boolean	—
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	—
stroke	Stroke width (e.g. 1px / 2px; only a number + px/em/rem/pt is accepted; invalid values disable the stroke; double-layer stacking avoids the background-clip:text clipping conflict)	string	—
stroke-color	Stroke color (falls back to the --oas-color-text-primary token, adapting to light/dark themes; whitelist-validated)	string	—
type	Semantic color gradient: primary / success / warning / danger / info (token-derived two stops; explicit gradient wins)	string	—

Slots

Name	Description
default	Gradient text content

CSS Variables

CSS Variable	Default
--oas-gradient-text-dir	to right
--oas-gradient-text-duration	3s
--oas-gradient-text-font	inherit
--oas-gradient-text-from	var(--oas-color-primary)
--oas-gradient-text-stroke-c	—
--oas-gradient-text-stroke-w	—
--oas-gradient-text-to	var(--oas-color-primary-hover)

• 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.