CSS Glassmorphism & Gradient Code Generator

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Glassmorphism Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen p-6 sm:p-10 transition-colors duration-300">

    <div class="max-w-5xl mx-auto space-y-8">
        <header class="text-center space-y-2">
            <span class="px-3 py-1 rounded-full bg-pink-500/10 text-pink-500 text-xs font-bold font-mono">Interactive CSS Generator</span>
            <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white">Glassmorphism Generator</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400">Adjust sliders to generate modern frosted glass CSS properties</p>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <!-- Live Preview Box -->
            <div class="h-80 rounded-3xl bg-gradient-to-br from-pink-500 via-purple-600 to-cyan-500 p-8 flex items-center justify-center relative overflow-hidden shadow-xl">
                <div id="glassBox" class="w-64 h-48 rounded-2xl bg-white/20 border border-white/30 backdrop-blur-md p-6 flex flex-col justify-between shadow-2xl text-white">
                    <span class="text-2xl font-bold">✨</span>
                    <div>
                        <h3 class="font-bold text-lg">Frosted Glass</h3>
                        <p class="text-[11px] opacity-80">Real-time backdrop filter preview</p>
                    </div>
                </div>
            </div>

            <!-- Controls Panel -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl p-6 space-y-6 shadow-sm">
                <div class="space-y-2">
                    <div class="flex justify-between text-xs font-bold">
                        <span>Backdrop Blur</span>
                        <span id="blurVal" class="font-mono text-pink-500">16px</span>
                    </div>
                    <input type="range" id="blurInput" min="0" max="40" value="16" oninput="updateGlass()" class="w-full accent-pink-500">
                </div>

                <div class="space-y-2">
                    <div class="flex justify-between text-xs font-bold">
                        <span>Opacity</span>
                        <span id="opacityVal" class="font-mono text-pink-500">0.25</span>
                    </div>
                    <input type="range" id="opacityInput" min="0.05" max="0.9" step="0.05" value="0.25" oninput="updateGlass()" class="w-full accent-pink-500">
                </div>

                <!-- Generated Code Output -->
                <div class="space-y-2 pt-4 border-t border-slate-100 dark:border-slate-800">
                    <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">CSS Code</span>
                    <pre id="cssOutput" class="p-3 rounded-xl bg-slate-950 text-cyan-300 font-mono text-xs overflow-x-auto leading-relaxed border border-slate-800"></pre>
                </div>
            </div>
        </div>
    </div>

    <script>
        function updateGlass() {
            const blur = document.getElementById("blurInput").value;
            const opacity = document.getElementById("opacityInput").value;

            document.getElementById("blurVal").innerText = blur + "px";
            document.getElementById("opacityVal").innerText = opacity;

            const glass = document.getElementById("glassBox");
            glass.style.backdropFilter = `blur(${blur}px)`;
            glass.style.backgroundColor = `rgba(255, 255, 255, ${opacity})`;

            const css = `background: rgba(255, 255, 255, ${opacity});\nbackdrop-filter: blur(${blur}px);\n-webkit-backdrop-filter: blur(${blur}px);\nborder: 1px solid rgba(255, 255, 255, 0.3);`;
            document.getElementById("cssOutput").innerText = css;
        }
        updateGlass();
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file