How to Use
Shadow Overlay Studio
This guide walks you through everything — from opening your first photo to exporting a polished final image. No prior design experience needed. If you can drag and click, you can use this tool.
What is Shadow Overlay Studio?
Shadow Overlay Studio is a browser-based creative tool that lets you add natural-looking shadow effects and analog film styles to your photographs. It works completely in your browser — nothing is installed, nothing is uploaded to a server, and your photos never leave your device.
It is most useful for:
- Photographers who want to add mood and depth to portraits, product shots, or editorial images
- Graphic designers who need shadows that feel physically real, not digital
- Content creators building social media images that stand out
You don't need Photoshop, Lightroom, or any design software. The entire tool runs in the tab you're reading this from.
Understanding the Interface
The app has three panels side by side, plus a toolbar at the top:
Left panel — Shadow Gallery
This is where all 70+ shadow types live, organised by category. At the top you'll find three special buttons: ✦ Custom Shape, ✏ Draw Shadow, and 📷 Shadow from Image. Below them is a search box to quickly find any shadow by name.
Centre — The canvas
This is your workspace. Your photo appears here as a floating document. The dark area around it is infinite canvas — you can scroll and zoom freely. The small gold border shows the edges of your document (what will be exported).
Controls above the canvas: zoom buttons, a Fit button, and your document tab names. The doc size button (shows dimensions like "1080×1080") lets you resize the document.
Right panel — Layers & Properties
Everything you add creates a layer. The Layers section lists all layers. Click any layer to select it. The Properties section then shows controls for that specific layer — opacity, blur, position, rotation, and more.
Below Layers and Properties you'll find Presets (saved looks), Film (analog film effects), and Export options.
All right-panel sections are collapsible — click the section title to expand or collapse it. Clicking any layer automatically expands Properties for you.
Your First Shadow in 5 Minutes
Open your photo
Click 📂 Open in the top toolbar, or simply drag and drop an image file onto the canvas. JPEG, PNG, and WEBP all work. Your photo opens in a new tab, and the canvas auto-sizes to match your image dimensions.
Use Place instead of Open if you want to add a second image into the same document — useful for composites.
Pick a shadow from the gallery
In the left panel, browse the shadow categories — Nature, Architecture, Objects, and more. Click any shadow tile to add it to your document. The shadow appears as a new layer on top of your photo.
The most popular starting shadows for photography:
- Monstera — dramatic tropical leaf, great for portraits and beauty
- Venetian Blinds — cinematic light stripes, perfect for editorial
- Palm Fronds — summer/lifestyle feel
- Window Pane — clean geometric light, great for product photography
Adjust the shadow
Click the shadow layer in the right panel (or click it directly on the canvas) to select it. The Properties panel opens with these main controls:
- Opacity — how visible the shadow is (0 = invisible, 1 = full strength)
- Blur — how soft or sharp the shadow edge is. 0 is razor-sharp; 20+ is very diffuse and natural
- Warmth — slides the shadow colour from cool indigo (−1) through neutral dark (0) to warm amber (+1). Match this to your scene's lighting
- Scale — makes the shadow bigger or smaller
- Rotation — rotates the shadow
You can also drag the shadow directly on the canvas to reposition it.
Export your image
Choose your format (JPEG is fine for most uses) and size in the toolbar, then click Export ↓. The file downloads directly to your device. That's it.
The Shadow Library
Shadow categories explained
| Category | What it's for | Best used with |
|---|---|---|
| Nature (19) | Plant and organic shadows — leaves, grass, trees, flowers | Lifestyle, beauty, portrait photography |
| Architecture (10) | Window, blinds, gate, curtain light patterns | Editorial, interior, fashion photography |
| Objects (10) | Everyday objects — feather, candle, compass, wine glass | Product photography, still life |
| Creatures (8) | Animal and insect silhouettes — butterfly, spider web, birds | Artistic, editorial |
| Atmosphere (8) | Weather and sky effects — clouds, rain, sunburst, rainbow | Landscape-adjacent, dreamy moods |
| Realism (9) | Effects that make digital images look photographed — scanner edge, camera glare, scan lines | Making AI images or composites look real |
| Abstract (8) | Geometric patterns — hex grid, fingerprint, DNA, waveform | Design-forward, graphic work |
| Typography (36) | All letters A–Z and numbers 0–9 as shadows | Text-on-photo compositions |
Hold Shift and click a shadow tile to add a second copy of that shadow independently — useful for layering the same shadow at different opacities or positions.
Shadow controls in detail
Shadow Colour — The colour picker in Properties lets you set any colour for a shadow. Click the swatch, choose any colour. Click ↺ Default to return to the warmth-based colour system. This means you can use indigo shadows, red shadows, white shadows — anything.
Blend Mode — This controls how the shadow interacts with your photo. Multiply is the natural default (shadow darkens what's beneath, like real shadows do). Screen makes it brighter (good for light overlays). Overlay adds contrast and colour. Experiment freely — undo is Ctrl Z.
Flip — Mirror the shadow horizontally or vertically. Useful when the shadow direction doesn't match your photo's light source.
Shadow from Image
This feature turns any image into a shadow. It's useful when you want the shadow to match the exact shape of a specific object — a person, a product, an animal.
How it works
- Click 📷 Shadow from Image in the left panel
- A dialog appears asking which mode to use: Full Image Shadow or Background Removed Shadow (coming soon)
- Choose Full Image Shadow — this converts every visible pixel of your image into a dark shadow silhouette
- Select your image file from your device
- The shadow appears as a new layer. Use the blur, opacity, and warmth controls to style it
Works best with images that already have a clear subject — product photos, portraits with plain backgrounds, objects on white backgrounds. Place the shadow layer under your subject layer in the Layers panel for the most natural look.
Drawing a Custom Shadow
The Draw Shadow tool lets you create any shadow shape freehand, directly on the canvas. No Photoshop pen tool knowledge needed.
Drawing your shadow
- Click ✏ Draw Shadow in the left panel — the button turns gold, indicating draw mode is active
- Click and drag on the canvas to draw your shape. The outline shows as you go
- When you're happy with the shape, click ✏ Draw Shadow again to finish
- Your drawn shape becomes a shadow layer with full blur, opacity, warmth, and colour controls
Draw mode stays active until you click the button again. If you accidentally click on layers while in draw mode, keep drawing — the shape is building from your entire drag path. Click the button to finish and review.
Film Effects
Film mode adds analog photography characteristics to your entire document — grain, fade, vignette, and halation. Click 🎞 Film in the toolbar to toggle it on, which reveals the Film section in the right panel.
Film stocks
| Stock | Character | Best for |
|---|---|---|
| Natural | Subtle. Slightly desaturated, barely visible | When you want shadow without obvious film look |
| Kodak Gold | Warm, slightly saturated, orange-amber shadows | Portraits, golden hour, lifestyle |
| Fuji Superia | Cool greens, high contrast | Street, documentary, urban |
| Ilford HP5 | Black and white, high contrast, silver grain | Portrait, fashion, artistic work |
| Black & White | Clean monochrome, no tint | When you want pure B&W without Ilford's character |
| Scanned Doc | Warm paper, scan lines, slightly degraded | Making images look like scanned prints |
| Expired Film | Heavy grain, orange leak, reduced contrast, faded | Vintage, nostalgic, lo-fi |
Film sliders
- Grain — film grain intensity. Keep below 30 for subtle realism; push above 60 for obvious lo-fi
- Fade / Matte — lifts the shadows (the darkest parts of the image), creating a matte/lifted look common in film photography
- Vignette — darkens the corners of the image, drawing attention to the centre
- Halation — a soft glow around bright areas, mimicking light bleeding through film emulsion
Click ↺ Reset Film to Defaults at the bottom of the Film section to return all sliders to their starting values.
Working with Layers
Every element in your document is a layer — your photo, each shadow, any text or shapes. Layers stack on top of each other, and the order matters.
Layer controls
- 👁 Eye icon — click to show/hide a layer
- 🔒 Lock icon — click to lock a layer (locked layers can't be moved or edited accidentally)
- ↑ ↓ arrows — move the layer up or down in the stack
- × button — delete the layer
- Double-click the name — rename the layer
Moving and resizing on canvas
Click any layer on the canvas to select it. Gold handles appear around it:
- Drag the layer body — moves the layer
- Drag a corner handle — resizes the layer (uniform scale)
- Drag the round handle above the layer — rotates the layer
- Click the layer again — deselects it
Use the Arrow keys to nudge a selected layer by tiny amounts. Hold Shift + arrow for larger nudges. This is much easier than dragging for precise positioning.
Layer order matters
Shadows should generally be above your photo in the layer stack (so they're visible on top). Your photo should be at the bottom of the Effects group. Use the ↑ ↓ buttons or [ ] keys to reorder layers.
Presets
Presets are saved combinations of shadow layers and film settings. They let you apply a complete "look" to any photo with one click.
The Presets section in the right panel shows Curated presets (built-in looks like "Editorial Monstera" and "Golden Hour") and My Presets (ones you save yourself).
Applying a preset
- Open your photo first
- Expand the Presets section (click the "Presets" header)
- Click any preset name — the shadow layers and film settings apply immediately
- The active preset is highlighted in gold and shown in a badge on the section header
- Click the same preset again to deselect it and remove its effects
Saving your own preset
Get your shadows and film exactly how you want, then click ＋ Save Current as Preset. Give it a name. It's saved in your browser — available every time you open the app, no account needed.
Exporting Your Work
Quick export (toolbar)
Choose format and size from the dropdowns in the toolbar, then click Export ↓. The image downloads immediately.
Export panel (right panel)
Open the Export section in the right panel for more options:
- Trim white space — automatically crops any white/empty edges from the export. Useful when your subject doesn't fill the full canvas
- Export Full Layers ↗ — if any layers extend beyond the document boundary, this option captures everything, making the export larger than your document
- Batch Export — apply your current shadows to multiple photos at once. Select several files and each one is exported with the same shadow stack applied
Export formats
| Format | When to use |
|---|---|
| JPEG | Social media, sharing, most uses. Smaller file size |
| PNG | When you need transparency, or maximum quality for print |
| WebP | Websites — smaller than JPEG at similar quality |
| Print, client delivery. Page sized exactly to your document — no margins |
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Undo | Ctrl Z |
| Redo | Ctrl Y or Ctrl Shift Z |
| Export | Ctrl E |
| Duplicate selected layer | Ctrl D |
| Delete selected layer | Delete or Backspace |
| Deselect | Escape |
| Nudge layer (small) | ↑ ↓ ← → |
| Nudge layer (large) | Shift + Arrow |
| Move layer up in stack | ] |
| Move layer down in stack | [ |
| Pan canvas | Space + drag, or scroll |
| Zoom in/out | Ctrl + scroll |
| Fit document to screen | Click Fit button |
Common Questions
My shadow looks too strong / too dark
Lower the Opacity slider in Properties. A value between 0.4 and 0.65 usually looks most natural. You can also increase the Blur to soften the shadow's edge.
The shadow colour looks wrong for my photo
Adjust the Warmth slider. For sunny, warm-lit photos, push warmth toward +0.5. For studio or blue-toned photos, try −0.2 to −0.5. You can also set a completely custom colour using the Shadow Colour picker in Properties.
How do I stack multiple shadows?
Just click multiple shadows in the gallery. Each creates a separate layer. You can adjust them independently. Try a large blurred shadow (for ambience) combined with a sharper one (for definition). Hold Shift when clicking a tile to add a second copy of the same shadow.
My photo isn't filling the document properly
Click the photo layer, then click ⊡ Fit Layer Inside Document in Properties. This scales the image to fit exactly within your document boundaries. For a different document size, click the dimensions button in the canvas bar (e.g. "1080×1080") to resize.
Can I work on multiple photos at once?
Yes — use document tabs. Click + in the canvas bar to add a new tab, or use Open for a new tab with each new photo. Tabs appear at the top of the canvas area. Click between them freely.
How do I save my work?
Click ⬡ Snapshot in the toolbar to save your current shadow layers and film settings to your browser. They restore automatically next time you open the app. The app also auto-saves every 60 seconds.
Snapshots save shadow layers and settings — not your photos. You'll need to re-open photos each session, since images never leave your device.
Ready to make your first shadow?
The best way to learn is to open a photo and start clicking. You can't break anything — undo is always one keystroke away.
Open Shadow Overlay Studio →