Spaces:
Running
Running
Create a beautifully animated multi color background in TailwindCSS using blob and blur effects and other liquid-like effects and make the animation respond slightly to mouse movement. Use colors that fit well and are bright and attention getting. Use lots of transparent gradients. Keep the number of blob shapes to less than 10 and make all of them appear to randomly change shape at different speeds that are all fitting with the general peaceful vibe of the background.
9c0520a
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Liquid Motion Background</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="relative min-h-screen overflow-hidden bg-black"> | |
| <!-- Animated Background Blobs --> | |
| <div class="fixed inset-0 z-0"> | |
| <div class="blob blob-1"></div> | |
| <div class="blob blob-2"></div> | |
| <div class="blob blob-3"></div> | |
| <div class="blob blob-4"></div> | |
| <div class="blob blob-5"></div> | |
| <div class="blob blob-6"></div> | |
| <div class="blob blob-7"></div> | |
| <div class="blob blob-8"></div> | |
| </div> | |
| <!-- Content --> | |
| <div class="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-4"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-in"> | |
| Liquid Motion | |
| </h1> | |
| <p class="text-xl md:text-2xl text-gray-200 max-w-2xl mb-10 animate-fade-in-delay"> | |
| Beautifully animated multi-color background with blob and blur effects | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="px-6 py-3 bg-white bg-opacity-20 backdrop-blur-lg rounded-full text-white font-semibold hover:bg-opacity-30 transition-all duration-300 transform hover:scale-105"> | |
| Explore Effects | |
| </button> | |
| <button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full text-white font-semibold hover:from-purple-600 hover:to-pink-600 transition-all duration-300 transform hover:scale-105"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |