Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Gradient Background</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="min-h-screen bg-slate-900 p-8 flex flex-col items-center justify-center space-y-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl"> <!-- Linear Gradient --> <div class="h-64 rounded-2xl bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 p-8 flex flex-col justify-end shadow-xl shadow-purple-500/20"> <h3 class="text-white font-bold text-2xl mb-2">Linear Gradient</h3> <p class="text-white/80 font-medium tracking-wide text-sm">bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500</p> </div> <!-- Radial Gradient --> <div class="h-64 rounded-2xl bg-radial-[at_top] from-amber-200 via-orange-500 to-rose-700 p-8 flex flex-col justify-end shadow-xl shadow-orange-500/20"> <h3 class="text-white font-bold text-2xl mb-2">Radial Gradient</h3> <p class="text-white/80 font-medium tracking-wide text-sm">bg-radial-[at_top] from-amber-200 via-orange-500</p> </div> <!-- Conic Gradient --> <div class="h-64 rounded-2xl bg-conic-[at_bottom_right] from-blue-700 via-blue-800 to-gray-900 p-8 flex flex-col justify-end shadow-xl shadow-blue-900/40 border border-blue-700/50"> <h3 class="text-white font-bold text-2xl mb-2">Conic Gradient</h3> <p class="text-blue-200/80 font-medium tracking-wide text-sm">bg-conic-[at_bottom_right] from-blue-700 via-blue-800</p> </div> <!-- Animated Gradient / Mesh --> <div class="h-64 rounded-2xl bg-linear-to-r from-emerald-400 via-teal-500 to-cyan-500 p-8 flex flex-col justify-end relative overflow-hidden shadow-xl shadow-teal-500/20 group"> <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDUiLz4KPHBhdGggZD0iTTAgMEw4IDhaTTggMEwwIDhaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIwLjA1Ii8+Cjwvc3ZnPg==')] opacity-50 mix-blend-overlay group-hover:scale-110 transition-transform duration-1000"></div> <h3 class="text-white font-bold text-2xl mb-2 relative z-10">Textured Gradient</h3> <p class="text-white/80 font-medium tracking-wide text-sm relative z-10">Gradient with SVG noise overlay</p> </div> </div> </div> </body> </html>
