Skip to content
All Taste components

Text effects

Gradient headline

A headline where your brand colours drift slowly through the key words.

headline · eyebrow · plain line

Now with motion

Ship the interface, not the busywork

Every colour comes from your own system, in light and dark.

/* globals.css
@keyframes gradient-drift { to { background-position: 150% 0; } }
*/
import { cn } from "@/lib/utils";

export function GradientText({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <span
      className={cn(
        "bg-gradient-to-r from-primary via-info to-primary bg-[length:300%_100%] bg-clip-text text-transparent",
        "animate-[gradient-drift_9s_linear_infinite] motion-reduce:animate-none",
        className,
      )}
    >
      {children}
    </span>
  );
}

export function GradientHeadline() {
  return (
    <h2 className="text-balance text-center text-[32px] font-medium leading-tight tracking-tight text-fg">
      Ship the interface, <GradientText>not the busywork</GradientText>
    </h2>
  );
}

The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.