Technical Specification: CSS Box Shadow & Layered Glow Generator

Overview

A high-performance, browser-based utility tool designed to help frontend developers and designers create complex, multi-layered CSS box shadows and glows. The tool provides a visual interface to manage multiple shadow layers, real-time code generation, and immediate visual feedback.

Core Constraints (Mandatory)

• Single File: All HTML, CSS, and JavaScript must be contained in one file.
• Light Mode Only: The UI must strictly follow a high-contrast, professional light-mode aesthetic (white backgrounds, soft gray accents, vibrant primary actions).
• No Persistent Storage: Do not use localStorage, sessionStorage, cookies, or indexedDB. The state must reside strictly in JavaScript variables.
• Sandbox Compatible: No popups (alert/prompt), no external dependencies that require origin access. All modals must be pure CSS/JS overlay elements.
• Framework-Free: Use Vanilla JS/CSS only.

Feature List

1. Layer Management: Add, delete, and reorder (if applicable) multiple shadow layers.
2. Visual Editor: Sliders for X-offset, Y-offset, Blur Radius, Spread Radius, and Opacity.
3. Color Control: Native color picker for each layer.
4. Inset Toggle: Individual toggle for 'inset' shadows per layer.
5. Real-time Preview: A central display area showing the final rendered object, allowing users to toggle background colors to test contrast.
6. Code Export: One-click 'Copy to Clipboard' for the generated CSS box-shadow property string.
7. Responsive Controls: Sidebar or top-bar control layout that adapts to mobile viewports.

UI Layout

• Header: Simple title and description.
• Main Tool Area:
  • Left Column: Control panel for shadow properties (grouped by Layer).
  • Right Column: Preview canvas and CSS code output box.
• Modal Layer: Custom overlays for 'Copied to Clipboard' feedback (avoiding standard browser alerts).

Styling & Palette (Light Mode)

• Background: #f8fafc (Slate-50).
• Card Background: #ffffff (Pure White) with subtle #e2e8f0 border.
• Primary Action: #2563eb (Blue-600) for buttons.
• Typography: Sans-serif, dark gray text (#1e293b) for high readability.
• Transitions: Use transition: all 0.2s ease-in-out for all interactive elements to ensure a premium 'SaaS' feel.

Implementation Directives

• Use semantic HTML5.
• All icons (e.g., trash, copy) should be handled via simple SVG tags or a light-weight CDN link (e.g., Lucide or FontAwesome).
• The CSS code output must automatically update as sliders move, using the input event listener.
• Ensure the preview box is large enough to show the full effect of large blurs without being clipped.