Shadow Studio
A shadow generation app for Canva
Shadow Studio is a professional shadow creation tool designed specifically for Canva. It enables users to create sophisticated multi-layer shadows for any design element, transforming ordinary graphics into professional, visually striking designs. The platform integrates seamlessly with Canva's ecosystem, providing advanced shadow controls that go beyond basic design tools.
​
​
Intro and tutorial video for Shadow Studio
Directory
Key Features
​​
1. Import System
Purpose:
Import existing design elements to apply shadows.
​
How it Works:
- Uses Canva's selection API to detect selected elements
- Captures element properties and positioning
- Converts elements to shadow-compatible format
- Maintains original aspect ratios and transparency
User Experience:
- Toggle between Import and Shape modes
- Visual feedback when elements are selected
- Automatic element type detection
- One-click import functionality
2. Shape Library
Purpose: Provides 70+ pre-built shapes for shadow creation
​
Available Shapes:
- Basic geometric shapes (Circle, Square, Triangle, etc.)
- Complex polygons (Hexagon, Octagon, Pentagon)
- Decorative shapes (Stars, Diamonds, Crosses)
- Specialized shapes (Frames, Targets, etc.)
Technical Implementation:
- HTML/CSS-based rendering for consistency
- Transparent background support
- Scalable vector approach
- Optimized for shadow compatibility
Shape Compatibility System:
- Round shapes: Use circular inset shadows for INSET/RECESSED types
- Square shapes: Use directional inset shadows
- Automatic filtering of incompatible combinations
- Smart shape switching when changing shadow types
​
3. Shadow Types
Drop Shadows
- Description: Traditional external shadows that appear behind elements
- Use Cases: Standard depth effects, card designs, button styling
- Controls: X/Y offset, blur radius, spread, opacity
- Compatible: All shapes and imported elements
Dual Shadows
- Description: Combines two shadow layers for complex depth effects
- Use Cases: Realistic material design, advanced lighting effects
- Controls: Separate settings for each shadow layer
- Compatible: All shapes and imported elements
Inset Shadows
- Description: Internal shadows that create recessed or carved effects
- Use Cases: Button pressed states, input fields, engraved text
- Controls: Internal positioning, blur, and opacity
- Compatible: Compatible shapes only (automatic filtering applied)
Perspective shadows
- Description: uses a single shadow layer system to create a 3D ground shadow effect
- Use Cases: Professional UI elements, premium design effects
- Controls: a more limited UI than the other shadow types, with fewer sliders​
​​
4. Advanced Controls
Light Positioning System
- Interactive Preview: Drag-and-drop light source positioning
- X/Y Coordinates: Precise numerical control (0.0 to 1.0 range)
- Distance Control: Light distance affects shadow intensity and spread
- Real-time Feedback: Immediate shadow updates during adjustment
Shadow Parameters
- Elevation: Controls shadow distance from element (0-100 range)
- Length: Adjusts shadow extension and directionality
- Offset Distance: Fine-tunes shadow positioning
- Shadow Opacity: Controls shadow transparency (0-100%)
- Light Angle: Directional control for shadow casting
Preset System
- Soft: Gentle, diffused shadows for subtle depth
- Natural: Realistic shadows mimicking natural lighting
- Sharp: High-contrast shadows for dramatic effects
- Dramatic: Bold, pronounced shadows for striking visuals
​
5. Color Management
Shadow Colors
- Color Picker: Full spectrum color selection
- Real-time Preview: Immediate color feedback
- Opacity Integration: Combined with shadow opacity controls
- Custom Palettes: Save and reuse color combinations
Shape Colors
- Fill Colors: Solid color fills for shape elements
- Transparency Support: Alpha channel compatibility
- Gradient Preview: Visual feedback for shadow-shape combinations
Background Colors
- Preview Enhancement: Better shadow visibility during editing
- Export Compatibility: Transparent backgrounds for final output
- Contrast Testing: Optimize shadow visibility across backgrounds
​
6. Animation System
Keyframe Animation
- Start/End Capture: Record shadow states at different positions
- Parameter Interpolation: Smooth transitions between all shadow settings
- Light Position Animation: Animate light source movement
- Color Transitions: Smooth color changes during animation
Animation Controls
- Duration Control: Adjustable animation length (1-10 seconds)
- Easing Functions: Multiple timing curves (Linear, Ease-in, Ease-out, Ease-in-out)
- Direction Options: Normal, Reverse, Alternate playback
- Playback Controls: Separate Play and Stop buttons
Advanced Animation Features
- Single Playthrough: Animations play once and stop automatically
- Interrupt Capability: Stop button works during playback
- Progress Tracking: Real-time progress indicator
- Reset Functionality: Return to the start position after stopping
- Please note that this is a new experimental feature and can be further developed if it proves popular
​
​
7. Export Functions
PNG Export
- High Quality: Maintains shadow fidelity and transparency
- Transparent Backgrounds: Professional output ready for use
- Optimized Sizing: Automatic dimension calculation
- Instant Download: Direct file delivery to user
SVG Export
- Vector Format: Scalable shadows for any size requirement
- Small File Sizes: Efficient vector-based output
- Web Compatible: Ready for web and digital use
- Professional Quality: Crisp shadows at any resolution
Apply to Selection
- Direct Integration: Apply shadows to selected Canva elements
- Non-destructive: Original elements remain intact
- Instant Application: Immediate shadow addition to designs
- Undo Support: Compatible with Canva's undo system
​
MP4/GIF/JSON
- Replace PNG and SVG exports when 'Animation' is enabled
- This is a new experimental feature
​
​​
Frontend Interface
- React-based user interface built with Canva's App UI Kit
- Responsive design optimized for Canva's 350px width constraint
- Real-time preview system with interactive controls
- Professional typography using Roboto (headers) and Helvetica Neue (body text)
Shadow Engine
- Advanced CSS shadow generation system
- Support for four distinct shadow types: Drop, Dual, Inset, and Recessed
- Intelligent shape compatibility system
- Real-time rendering with hardware acceleration
Integration Layer
- Canva Design SDK for element manipulation
- Asset upload system for generated shadows
- Selection API for importing existing design elements
Core Components
​​
Canva Platform
- App UI Kit: Native Canva components for consistent experience
- Design SDK: Direct integration with Canva's design system
- Permissions: Proper content read/write and asset upload permissions
- Performance: Optimized for Canva's sandbox environment
Browser Compatibility
- Modern Browsers: Support for latest Chrome works best
- Hardware Acceleration: GPU-accelerated shadow rendering when available
- Progressive Enhancement: Graceful fallbacks for older browsers
- Mobile Support: Touch-optimized controls for mobile devices
Performance Optimization
- Efficient Rendering: Optimized CSS shadow calculations
- Memory Management: Careful state management to prevent memory leaks
- Animation Performance: RequestAnimationFrame-based smooth animations
- Asset Optimization: Compressed builds and efficient asset loading
​
Technical Integration
​
Design Guidelines
1. Start Simple: Begin with basic drop shadows before advancing to complex effects
2. Consider Context: Match shadow intensity to design style and purpose
3. Test Backgrounds: Preview shadows against various background colors
4. Maintain Consistency: Use similar shadow styles throughout a design project
Performance Tips
1. Optimize Complexity: Complex recessed shadows may impact performance on older devices
2. Batch Operations: Apply similar shadows to multiple elements simultaneously
3. Preview Before Export: Use the preview system to verify shadows before final export
4. Regular Updates: Keep the app updated for latest performance improvements
​
Best Practices
​​
Common Issues
- Shadow Not Visible: Check opacity settings and background contrast
- Performance Lag: Reduce shadow complexity or blur radius
- Export Problems: Ensure transparent backgrounds are properly configured
- Animation Stuttering: Reduce animation duration or complexity
​
Support Resources
- In-app Help: Contextual tooltips and guidance throughout the interface
- Community Support: Access to user community and design resources
- Documentation: Comprehensive guides for advanced features
- Update Notifications: Automatic alerts for new features and improvements
​
Please report bugs to: simon.spencer.harvey@gmail.com subject: Shadow Studio Bug
Please share feature request to: simon.spencer.harvey@gmail.com subject: Shadow Studio Idea
​
Troubleshooting and Support
​
Current Version: 1.0.127
- Fixed animation system to play once instead of infinite loop
- Enhanced Stop button functionality for better user control
- Improved shadow parameter interpolation during animations
- Optimized performance for smoother real-time previews
Recent Improvements
- PERSPECTIVE shadow type development (in progress)
- Enhanced UI scroll prevention system
- Hybrid shadow system for INSET/RECESSED compatibility
- Expanded shape library with 70+ professional shapes
- Advanced color management with real-time preview updates