Gradient Text

1.gradient-text {
2  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
3  -webkit-background-clip: text;
4  -webkit-text-fill-color: transparent;
5  background-clip: text;
6  text-fill-color: transparent;
7}
8
9/* Animated gradient text */
10.animated-gradient-text {
11  background: linear-gradient(
12    90deg,
13    #667eea 0%,
14    #764ba2 25%,
15    #f093fb 50%,
16    #667eea 75%,
17    #764ba2 100%
18  );
19  background-size: 200% auto;
20  -webkit-background-clip: text;
21  -webkit-text-fill-color: transparent;
22  background-clip: text;
23  animation: gradient-shift 3s linear infinite;
24}
25
26@keyframes gradient-shift {
27  to {
28    background-position: 200% center;
29  }
30}