New

GradientText

Text with animated gradient using CSS background-clip with customizable color stops and animation speed.

Creative & Uniquegradienttextanimationtypographycolorful

Dependencies

No additional dependencies needed.

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3export default function GradientText() {
4  return (
5    <div className="mx-auto max-w-2xl space-y-8 py-8 text-center">
6      <div>
7        <h1
8          className="text-5xl font-extrabold tracking-tight md:text-7xl"
9          style={{
10            background: "linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%)",
11            backgroundSize: "200% 200%",
12            WebkitBackgroundClip: "text",
13            WebkitTextFillColor: "transparent",
14            backgroundClip: "text",
15            animation: "gradient-shift 4s ease infinite",
16          }}
17        >
18          Build Something Beautiful
19        </h1>
20        <style>{`
21          @keyframes gradient-shift {
22            0% { background-position: 0% 50%; }
23            50% { background-position: 100% 50%; }
24            100% { background-position: 0% 50%; }
25          }
26        `}</style>
27      </div>
28
29      <p
30        className="text-2xl font-bold"
31        style={{
32          background: "linear-gradient(90deg, #f97316, #ef4444, #ec4899, #8b5cf6, #3b82f6, #f97316)",
33          backgroundSize: "300% 100%",
34          WebkitBackgroundClip: "text",
35          WebkitTextFillColor: "transparent",
36          backgroundClip: "text",
37          animation: "gradient-scroll 3s linear infinite",
38        }}
39      >
40        The future of design is here
41      </p>
42      <style>{`
43        @keyframes gradient-scroll {
44          0% { background-position: 0% 50%; }
45          100% { background-position: 300% 50%; }
46        }
47      `}</style>
48
49      <p className="text-sm text-zinc-500 dark:text-zinc-400">Animated CSS gradients with background-clip: text</p>
50    </div>
51  );
52}