Export
GradLab offers three export formats. All exports capture the full composited output — gradient, halftone, ASCII matrix, and grain — at native render resolution (minimum 2× device pixel ratio).
PNG Screenshot
Export scale
Choose 1×, 2×, or 3× above the download buttons. The pixel dimensions shown next to the selector are the actual PNG/video output size. 1× preserves the existing render resolution, including the minimum 2× device-pixel ratio; 2× and 3× multiply each dimension. For example, a 640×360 canvas on a DPR-2 display exports at 1280×720, 2560×1440, or 3840×2160.
The canvas layout stays unchanged. Higher scales render more pixels instead of enlarging a previously captured image. The selector does not change HTML or parameter-code exports. Oversized outputs show an error rather than silently reducing resolution.
Video is rendered offline at a fixed 30 fps and encoded as a high-quality H.264 MP4. Encoding may take longer than the recorded duration, especially at 2× and 3×, but the exported file keeps every frame instead of dropping frames under real-time load.
Download Frame captures the current canvas state as a PNG.
- Pixel dimensions = canvas size ×
Math.max(2, devicePixelRatio)× export scale - Includes all active layers: gradient, halftone, ASCII matrix, and film grain
- Higher scales may take longer to render and encode
Best for: static assets for presentations, social media, UI mockups, or print.
Video Recording
Record MP4 sets the animation duration, then renders and encodes every frame after you stop.
- Click Record MP4 to begin — the button shows an elapsed timer
- Click Stop when done
- GradLab renders the timeline at 30 fps, shows encoding progress, and downloads the MP4
| Setting | Options |
|---|---|
| Format | MP4 (H.264), encoded offline at 30 fps |
| Ping-pong Loop | Plays forward then reverses — produces a seamless infinite loop |
INFO
Enable Ping-pong Loop before starting the recording if you intend to use the video as a looping background. The resulting file loops without a visible cut point.
Tips for clean recordings:
- Record 3–8 seconds and use ping-pong loop — keeps file sizes small
- Lower Speed before recording for a slower, more atmospheric loop
- Preview tilt is not included in PNG/MP4; there is no tilt switch to disable
HTML Code Export
Export Code produces a fully self-contained .html file containing:
- The complete WebGL shader source
- Current shader, effect, and camera settings
- The canvas rendering loop
- No external dependencies — runs offline in a browser with WebGL support
The resulting HTML can be:
- Dropped into an
<iframe>in any web project - Used as a standalone full-screen background
- Opened directly as a file in a browser with WebGL support
- Shared as a single-file animation with embedded settings; preview time and live pointer state are not saved
TIP
The exported HTML is a snapshot of your current settings. Adjust the gradient and export again to get updated output — there is no live link between the HTML file and the app.
Resolution Notes
GradLab renders at Math.max(2, devicePixelRatio), providing a minimum pixel density of 2 on all platforms:
- Mac (Retina): 2× or 3× depending on display
- Windows (standard DPI): renders at least at 2×; higher device pixel ratios still apply
Saved state limits
Standalone HTML embeds an uploaded diffusion background image. Param Code stores settings without the original image, so re-upload the background to restore image diffusion. Param Code also excludes canvas W/H, export scale, the current animation time, and pointer heat trails. HTML adapts to its container; it is not a full editor-session backup.