Back to Discover

Tailwind CSS Background Gradient Animation

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="min-h-screen flex items-center justify-center p-6" x-data="{ 
                                                                        currentGradient: 'gradient-animate',
                                                                        gradients: [
                                                                        { name: 'Vibrant', class: 'gradient-animate', icon: 'color-palette-outline' },
                                                                        { name: 'Ocean', class: 'gradient-animate-fast', icon: 'water-outline' },
                                                                        { name: 'Slate', class: 'gradient-animate-slow', icon: 'moon-outline' }
                                                                        ]
                                                                        }">

  <!-- Animated Background -->
  <div class="fixed inset-0 -z-10 transition-all duration-1000" :class="currentGradient"></div>

  <!-- Content Card -->
  <div class="bg-white/10 backdrop-blur-lg rounded-3xl shadow-2xl p-8 max-w-2xl w-full border border-white/20">
    <div class="text-center mb-8">
      <div class="inline-flex items-center justify-center w-16 h-16 bg-white/20 rounded-full mb-4">
        <ion-icon name="color-wand-outline" class="text-4xl text-white"></ion-icon>
      </div>
      <h1 class="text-4xl font-bold text-white mb-3">Gradient Animation</h1>
      <p class="text-white/80 text-lg">Smooth, infinite background transitions</p>
    </div>

    <!-- Gradient Selector -->
    <div class="space-y-3">
      <p class="text-white/70 text-sm font-medium uppercase tracking-wider mb-4">Select Gradient Style</p>
      <template x-for="gradient in gradients" :key="gradient.class">
        <button 
                @click="currentGradient = gradient.class"
                :class="currentGradient === gradient.class ? 'bg-white/30 border-white/50' : 'bg-white/10 border-white/20 hover:bg-white/20'"
                class="w-full flex items-center gap-4 p-4 rounded-xl border-2 transition-all duration-300 group">
          <div class="flex items-center justify-center w-12 h-12 bg-white/20 rounded-lg group-hover:scale-110 transition-transform">
            <ion-icon :name="gradient.icon" class="text-2xl text-white"></ion-icon>
          </div>
          <div class="flex-1 text-left">
            <p class="text-white font-semibold text-lg" x-text="gradient.name"></p>
            <p class="text-white/60 text-sm">Click to apply</p>
          </div>
          <div x-show="currentGradient === gradient.class" class="text-white">
            <ion-icon name="checkmark-circle" class="text-2xl"></ion-icon>
          </div>
        </button>
      </template>
    </div>

    <!-- Info Section -->
    <div class="mt-8 pt-6 border-t border-white/20">
      <div class="flex items-start gap-3">
        <ion-icon name="information-circle-outline" class="text-2xl text-white/70 flex-shrink-0 mt-0.5"></ion-icon>
        <p class="text-white/70 text-sm leading-relaxed">
          These gradients use pure CSS animations with Tailwind CSS. Each gradient smoothly transitions through multiple colors creating a dynamic, modern effect.
        </p>
      </div>
    </div>
  </div>

  @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        .gradient-animate {
            background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #f43f5e);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        
        .gradient-animate-fast {
            background: linear-gradient(-45deg, #3b82f6, #06b6d4, #10b981, #f59e0b);
            background-size: 400% 400%;
            animation: gradient 8s ease infinite;
        }
        
        .gradient-animate-slow {
            background: linear-gradient(-45deg, #1e293b, #334155, #475569, #64748b);
            background-size: 400% 400%;
            animation: gradient 20s ease infinite;
        }

Comments (0)

No comments yet. Be the first!