Project
Shadow Studio
A PROFESSIONAL-GRADE MULTI-LAYER SHADOW ENGINE, BUILT FOR PRECISION.
RoleSolo Developer
TimelineFeb 2025 - Present
The Vision
A precision-engineered box-shadow generator that treats shadows as high-fidelity design assets. Shadow Studio allows designers and developers to stack multiple shadow layers, fine-tune them with granular controls, and instantly export the results as CSS, Tailwind CDN tokens, or custom variables. It bridges the gap between static design tools and production-ready code.
The Problem
Most online shadow generators only support a single layer, leading to flat, unrealistic results. Professional UI design (like that of Apple or Stripe) relies on 'layered shadows'—multiple offsets and blurs stacked together to simulate depth and diffusion. Achieving this manually in CSS is tedious, involving constant context-switching between the browser inspector and the code editor.
Who This Is For
Product designers who want to export pixel-perfect elevation styles. Frontend developers who need to quickly generate and test complex shadows in both light and dark modes. UI enthusiasts who value the technical 'feel' of a tool that prioritizes utility and speed over-bloat.
Engineering Strategy
The technical reasoning behind the implementation.
Why Vite + React (Not Next.js)
Shadow Studio is a high-performance utility tool, not a content-driven site. The priority is sub-second responsiveness to user input (sliders) and zero-latency rendering. Vite provides an optimized dev environment and a lean production build that loads almost instantly. Since there is no SEO-critical dynamic content that requires Server-Side Rendering (SSR), Next.js would have introduced unnecessary complexity (RSC, hydrated state lag) for a purely client-side canvas and UI-heavy experience.
Why Multi-Layer Engine (Not Single Layer)
The core logic in shadow.ts is built around an array of ShadowLayer objects. Most generators output a single string; Shadow Studio maps over a layer collection to generate complex, comma-separated box-shadow values. This architecture allows for features like 'preset stacking' and independent toggling of individual layers, mimicking the layer-based workflow of Figma.
Why URL-Persistence (Search Params)
Instead of a database, Shadow Studio uses the URL search parameters to store the entire state of the shadow design. Every slider movement updates the ?s= encoded string via window.history.replaceState. This makes every design 'shareable' by simply copying the URL. It ensures that the state is local-first, privacy-respecting, and requires zero backend infrastructure.
Technologies
Vite + React
Sub-second HMR and lightweight client-side state management. Priority is zero-latency response to slider inputs.
TypeScript
Strong typing for the ShadowLayer interface ensures data integrity across components.
Tailwind CSS
Rapid UI iterations and consistent design tokens for dark/light mode.
Radix UI / Shadcn
Accessible, high-quality primitives for complex inputs like sliders and switches.
Lucide React
Clean, consistent vector icons for UI interactions.
Vercel
Automatic edge deployments and global CDN for lightning-fast loading.
Core Features
- Multi-Layer CompositingStack an unlimited number of shadow layers. Each layer has independent controls for X/Y offset, blur radius, spread, and opacity.
- Intelligent PresetsOne-click access to curated shadow styles—from 'Subtle' and 'Elevated' to 'Sharp' and 'Glow'—serving as a starting point for further customization.
- Triple-Export SystemInstantly copy code in three formats: standard CSS box-shadow, Tailwind CSS configuration tokens, or CSS Custom Variables (--var).
- Dual-Mode PreviewA dedicated toggle to test how shadows look on deep charcoal (#000) versus clean white (#FFF) backgrounds, ensuring contrast consistency.
- URL State SyncYour entire design is encoded into the URL. Refresh the page or share the link with a teammate to restore the exact layer configuration.
- Keyboard-First WorkflowUse Cmd+K (or Ctrl+K) to instantly jump to the first slider, enabling a rapid feedback loop for power users.
- Interactive CSS OutputA syntax-highlighted code panel that updates in real-time as you tweak individual layers, with built-in copy-to-clipboard functionality.