CSS Glassmorphism Generator: Create Frosted Glass UI Effects

Project Specification: Professional Online CSS Glassmorphism Generator

Overview

A browser-based utility allowing developers and designers to interactively create the "frosted glass" UI effect. It offers real-time visualization and exports valid, production-ready code.

Layout Structure

• Header: Simple, clean utility title and dark/light mode toggle.
• Main Display (Canvas): A large, central area displaying a dynamic background (using abstract gradients or user-uploaded images) with a floating "Glass Card" in the center that updates in real-time.
• Control Sidebar: A collapsible settings panel containing sliders and color pickers.
• Code Export Footer: A persistent panel showing the CSS or Tailwind output with a one-click copy button.

Key Features

1. Dynamic Background Controls:
   • Pre-set abstract gradients.
   • Image uploader (local files or Unsplash API search).
   • Ability to shift background position and blur intensity.
2. Glass Card Customization:
   • Backdrop Blur: Slider for backdrop-filter: blur(px).
   • Background Color: Color picker with Alpha channel (Opacity) support for background: rgba().
   • Border Customization: Border thickness, color, and transparency settings.
   • Shadow Control: Custom soft shadow (box-shadow) settings to add depth.
   • Border Radius: Slider for rounded corners.
3. Export Options:
   • Standard CSS: Exports clean CSS rulesets.
   • Tailwind CSS: Exports the equivalent utility classes.
   • Copy to Clipboard: One-click functionality with success feedback notification.
4. Accessibility Checker:
   • A real-time contrast checker that warns the user if the glass text color is unreadable against the selected background.

Technical Requirements

• Stack: Vanilla JavaScript, HTML5, and Tailwind CSS for styling the tool interface itself.
• Animations: Smooth transitions for all slider interactions to give the app a polished feel.
• Browser Support: Requires modern browser support for backdrop-filter.
• Design Aesthetic: The tool interface itself should be clean, minimal, and modern, utilizing a "tool-first" design philosophy with high-contrast text for usability.