Capture App Screenshots with Transparent Backgrounds — No Photoshop
How to use AI screen capture to isolate UI windows, app interfaces, and desktop elements with transparent backgrounds — perfect for product marketing and presentations.
App screenshots are everywhere in product marketing — hero images, feature comparisons, help docs. Getting a screenshot with a transparent background (so you can place it over any background in your design) traditionally requires Photoshop and careful manual selection. The NSS Screen Capture tool does it with AI in real time.
What it does
The Screen Capture tool uses your browser's getDisplayMedia API to capture any window, tab, or screen region. While the capture is active, the AI processes frames in real time and removes the background — leaving just the window contents on a transparent canvas. You can then:
- Download any frame as a transparent PNG
- Switch to a solid colour or blurred background for screenshots on branded backgrounds
- Record a product demo with automatic background removal
Browser requirements
This tool requires the Screen Capture API, which is available in:
- Chrome 113+
- Edge 113+
- Firefox 99+ (slower, no WebGPU)
- Safari 17+ (limited)
For best results, use Chrome or Edge — they support WebGPU, which makes inference significantly faster.
Step-by-step guide
1. Open the tool and start capture
Go to /screen-capture and click Start screen capture. Your browser will show a permission dialog asking which window or tab to share. Select your app or window.
2. Choose your background mode
Three background modes are available:
Transparent — The background is completely removed. Best for downloading frames to use in design tools.
Blur — The original window background is blurred behind the subject. Gives a natural depth-of-field look for product screenshots.
Solid colour — A flat brand colour behind the subject. Great for consistent marketing assets across a product screenshot library.
3. Download frames
Click Download frame at any moment to save the current composited frame as a transparent PNG. There's no limit to how many frames you can download.
4. Stop capture
Click Stop or end the screen share from your browser's screen share indicator. The capture ends, and no data is retained.
What it's best for
Product marketing screenshots — Capture your app window with a transparent background, then composite it over gradients, device mockups, or custom backgrounds in Figma or Canva.
Help documentation — Isolate specific UI panels or dialog boxes without a cluttered desktop behind them.
Feature comparison images — Capture two states of your UI side by side on a clean white or brand-colour background.
Presentation slides — Place an isolated screenshot on a slide background without a visible desktop or browser chrome around it.
Performance expectations
Inference runs at 3–8 FPS depending on your GPU and browser:
| Setup | Expected FPS |
|---|---|
| Chrome + dedicated GPU (WebGPU) | 5–8 FPS |
| Chrome + integrated GPU (WebGPU) | 3–5 FPS |
| Firefox / Safari (WASM) | 1–3 FPS |
For static screenshots, FPS doesn't matter — even at 1 FPS, you can wait for a clean frame and click download. For continuous recording, WebGPU gives the smoothest result.
Privacy
Screen captures can contain sensitive information. All AI processing runs locally in your browser — no frames are sent to any server. The screen share permission can be revoked at any time using the browser's sharing indicator, which immediately ends the capture.