Technical Specification: Free Online CSS Glassmorphism Generator

Overview

A high-performance, single-file browser utility designed for web developers and UI designers to generate precise CSS code for "Glassmorphism" (frosted glass) elements. The tool focuses on providing real-time visual feedback and clean, copy-paste-ready CSS snippets.

Core Features

• Real-Time Preview Canvas: A central display area showing an interactive element demonstrating the glass effect over a vibrant, multi-colored background gradient.
• Control Panel: A sidebar interface with responsive sliders and color pickers for:
  • backdrop-filter: blur() intensity.
  • Background color and opacity (rgba / hsla control).
  • Border radius, border width, and border color.
  • Box shadow depth and spread (for subtle elevation).
• Code Export: An auto-updating code output block with a "One-Click Copy" button.
• Background Toggle: Ability to toggle between predefined vibrant gradients or a neutral backdrop to test the glass effect contrast.

UI/UX Design (Light Mode Only)

• Layout: A two-column grid layout (Sidebar on left, Preview on right) for desktop; stacked vertically for mobile devices.
• Color Palette:
  • Background: Off-white (#f9fafb).
  • Panels: Clean white (#ffffff) with subtle drop shadows (shadow-sm).
  • Primary Actions: Vibrant Blue (#2563eb) for buttons.
  • Text: High-contrast Slate/Gray (#1e293b).
• Aesthetic: Minimalist SaaS aesthetic. Smooth transitions (transition-all, duration-200) for all UI interactions.

Technical Implementation

• Architecture: Pure Vanilla HTML5, CSS3, and JavaScript within a single file.
• Styling: Tailwind CSS via CDN for rapid, consistent styling.
• Rendering: Direct DOM manipulation. Use element.style.backdropFilter, element.style.backgroundColor, etc., triggered by input event listeners.
• Browser Compatibility & Safety:
  • No Storage: The application must not use localStorage or cookies to ensure iframe safety.
  • No Dependencies: All logic contained within <script> tags.
  • Responsiveness: Use Flexbox/Grid for fluid resizing.

Developer Directives

1. Do not use external APIs: All functionality must be native to the browser.
2. State Management: Keep state in a simple JS object (e.g., const glassState = { blur: 10, opacity: 0.2 ... }).
3. DOM Updates: Map object changes to the preview element styles immediately upon slider movement.
4. Copy Functionality: Use navigator.clipboard.writeText() for the code output feature.
5. Light Mode Constraint: Ensure all UI elements (backgrounds, borders, inputs) stay within light-tone aesthetics. Do not include any "Dark Mode" toggles.