CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/gradient-text

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

ReactFont#gradient#typography

Usage

import GradientText from '@crazygl/hero-gradient-text';

export default function Page() {
  return (
    <GradientText
      heading="spectrum"
      color1="#ff5c8a"
      color2="#ffd86b"
      color3="#5b8def"
      angle={100}
      speed={8}
    />
  );
}

Customise

  • Content — heading, subheading.
  • Gradient — color1/color2/color3, angle, animate, speed.
  • Typography — fontSize, headingFontFamily, headingFontWeight, subColor.
  • Backdrop — transparentBackground, bgColor.

Best for

  • Bold one-word brand statements and landing-page headlines
  • Product, app, or design-studio hero sections
  • Section dividers and feature callouts that need a pop of color
01 · Install the package

One command, zero config.

npm install @crazygl/hero-gradient-text
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import GradientText from '@crazygl/hero-gradient-text';

export default function Landing() {
  return (
    <GradientText />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import GradientText from '@crazygl/hero-gradient-text';

export default function Page() {
  return (
    <section>
      <GradientText
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Animated Text Gradient

A heading filled with a slowly-shifting multi-stop gradient that loops across up to five user colours, with controllable angle and speed.

Motion Colour Text

Heading filled with a constantly drifting multi-stop conic gradient — like aurora moving through the letterforms.

Pro Text Type Effect

A pro-grade typewriter: cycles through multiple strings with variable per-character speed, fluid font sizing (clamp), per-line gradient fills, and a choice of cursor characters from block to slug to bar.

Progressive Blur Text

A giant display word that is razor-sharp at the top and melts into a progressively heavier blur toward the bottom — a true variable-radius blur per row, not a gradient-masked copy. Bold, editorial, fully recolourable.

Text Masking

Headline acts as a window onto a slowly drifting photograph — large letterforms, the photograph showing through them, a clean colored hero around the cut-out.

Text Fill

Headline that fills bottom-up with a progress colour — like a loading bar disguised as type. The fill loops 0 → 100% on a configurable cycle.Live customizer

Gradient Text

Colour 1Colour 2Colour 3Angle (deg)100°AnimateSpeed (s)8sFont size200pxFontWeight800Subheading colourTransparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.