Creates animated gradient text with smooth color transitions. Uses CSS background-clip for text masking with customizable colors, directions, and speeds. Features optional hover effects. Perfect for headings, CTAs, or adding vibrant emphasis to any text.

Build Amazing Things

Diagonal Flow Effect

Vertical Motion Style

Colors

Colors JSON array

Array of hex colors for gradient. Use 3+ colors for rich transitions. First and last should match for seamless loops.

Default: ["#ffaa40", "#9c40ff", "#ffaa40"]

Animation

Speed 1-30 seconds

Duration of one complete gradient cycle. Lower is faster, higher is slower and more elegant.

Default: 8

Direction 4 modes

Gradient flow direction. Options: horizontal, vertical, diagonal-left, diagonal-right.

Default: horizontal

Easing 4 modes

Animation timing function. Options: linear, ease-in, ease-out, ease-in-out.

Default: linear

Hover Effects

Hover Effect 5 modes

Interactive hover behavior. Options: none, scale (grows), brighten (increases brightness), glow (adds shadow), lift (moves up).

Default: none

Performance

This element uses CSS background-clip: text for gradient masking with pure CSS animations. No JavaScript runtime overhead - JS only used for initialization. Uses linear-gradient with animated background-position for smooth color flow. Highly performant - suitable for all devices and unlimited instances per page.