Membuat Animasi Gradien Teks dengan Tailwind CSS
Potongan kode CSS sederhana untuk membuat teks dengan latar belakang gradien yang bisa beranimasi, seperti yang digunakan pada judul di portofolio ini.
1.name-gradient {
2 background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF6347 100%);
3 -webkit-background-clip: text;
4 background-clip: text;
5 color: transparent;
6 background-size: 200% 200%;
7 animation: gradientShift 8s ease infinite;
8}
9
10@keyframes gradientShift {
11 0% { background-position: 0% 50%; }
12 50% { background-position: 100% 50%; }
13 100% { background-position: 0% 50%; }
14}