Note: This article was originally published on my personal blog. For more updates, follow me on Twitter @ibelick.
Text gradients have become increasingly popular in modern web design, giving websites a fresh and dynamic look. One excellent example of this trend is Apple's iPhone 14 landing page, where they showcase a stunning animated text gradient.
Vanilla CSS
<span>hello, animated text gradient</span>
span {
background: radial-gradient(
circle at 100%,
#b2a8fd,
#8678f9 50%,
#c7d2fe 75%,
#9a8dfd 75%
);
font-weight: 600;
background-size: 200% auto;
color: #000;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: animatedTextGradient 1.5s linear infinite;
}
@keyframes animatedTextGradient {
to {
background-position: 200% center;
}
}
What we do here is:
- background: radial-gradient(...): Creates a radial gradient with a circle at 100%, using the specified color stops.
- background-size: 200% auto: Sets the background size to 200% width and automatically adjusts the height.
- background-clip: text: Clips the background to the text content.
- -webkit-text-fill-color: transparent: Makes the text fill transparent (for webkit-based browsers).
- animation: animatedTextGradient 1s linear infinite: Applies the animatedTextGradient animation with a duration of 1s, a linear timing function, and infinite repetition.
- @keyframes rule defines the animatedTextGradient animation, which animates the background position from its initial value to 200% center, creating a smooth gradient movement effect.
Tailwind CSS
If you prefer using Tailwind CSS, here's the equivalent code written with React:
module.exports = {
theme: {
extend: {
animation: {
"text-gradient": "text 1.5s linear infinite",
},
keyframes: {
text: {
to: {
backgroundPosition: "200% center",
},
},
},
},
}
Then we use our animate-text-gradient
, we use a background image with a linear gradient with the same color stops as the previous example, and we set the background size to 200% auto, the background clip to text, and the text color to transparent.
export const AnimatedTextGradientTW: React.FC = () => {
return (
<span
className="animate-text-gradient bg-gradient-to-r from-[#b2a8fd] via-[#8678f9] to-[#c7d2fe]
bg-[200%_auto] bg-clip-text text-transparent"
>
hello, animated text gradient
</span>
);
};
Feel free to experiment and adapt the techniques discussed in this tutorial to fit your specific design needs and preferences.
Top comments (2)
The use of radial gradients and background-clip: text in Vanilla CSS creates a stunning effect. Well done! 👏
nice effect, useful. Thanks!