The problem
You want to create eye-catching text with gradient colors instead of solid colors.
The solution
.gradient-text {
background: linear-gradient(135deg, #3a7bff, #8b5cf6, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Animated gradient text */
.animated-gradient-text {
background: linear-gradient(
90deg,
#3a7bff, #8b5cf6, #ec4899, #3a7bff
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-flow 3s ease infinite;
}
@keyframes gradient-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}See it live
Put it to work
<h1 class="gradient-text">
Beautiful Gradient Heading
</h1>
<h2 class="animated-gradient-text">
Animated Gradient Text
</h2>Worth knowing
Works best on bold, large text. Add a fallback color for older browsers.