Gradient Text

Colorful gradient fills on text. Static or animated.

Hello World

Static gradient in <h1>

Animated

Animated gradient in <h1>

Heading Two

Static gradient in <h2>

Heading Two

Animated gradient in <h2>

Body text gradient

Static gradient in <p>

Body animated

Animated gradient in <p>

Neon Text

Glowing neon effect in six colors. Best on dark backgrounds.

Colors

Cyan

Magenta

Green

Orange

Blue

Red

Animations

Pulse Cyan

animation="pulse"

Flicker Magenta

animation="flicker"

Pulse Green

animation="pulse"

Flicker Orange

animation="flicker"

Pulse Blue

animation="pulse"

Flicker Red

animation="flicker"

Glitch Text

Distorted, glitchy text effect with configurable intensity.

Glitch

Default variant

Subtle

variant="subtle"

Intense

variant="intense"

Typewriter

Typing animation with optional cursor and speed control.

Hello, World!

Default speed

Fast typing

speed="fast"

Slow typing

speed="slow"

No cursor

cursor=false

Text Reveal

Text that reveals on scroll with fade or gradient effects.

Revealed on scroll

Default reveal

Gradient variant

variant="gradient"

Marquee

Scrolling text strip. Supports forward and reverse directions.

chirp-ui HTML over the wire zero JS frameworks pure CSS effects

Default direction

reversed scrolling text

reverse=true

Number Ticker

Animated number display with prefix, suffix, and size options.

Default

prefix="$" + suffix="%"

variant="mono" + size="lg"

Sizes

size="sm"

size="md"

size="lg"

size="xl"