How to Download and Export Gradients

GradLab offers three ways to download your gradient. Each format suits a different use case — this guide explains when to use each one and how to get the best output.

PNG — Download a still image

When to use: Static designs, social media posts, UI mockups, print, presentations.

1. Design your gradient on the canvas
2. Click Download Frame in the panel
3. A .png file downloads instantly

Resolution: Output pixels = Canvas W/H × Math.max(2, devicePixelRatio) × selected 1×/2×/3× scale. At DPR 2, a 640×360 canvas exported at 3× produces 3840×2160.

TIP

Use Canvas W/H to set the aspect ratio, then check the displayed export pixel dimensions. Canvas size and export pixel dimensions are different.

MP4 — Download a gradient video

When to use: Website hero backgrounds, social media video posts, video presentations, motion design assets.

1. Enable Ping-pong Loop in the panel (recommended for seamless loops)
2. Click Record MP4
3. Let the animation run for the desired duration (3–8 seconds is ideal)
4. Click Stop Recording
5. GradLab encodes and downloads the .mp4 file

Format: MP4 (H.264), rendered offline at a fixed 30 fps. Current Chrome and Edge provide the most consistent WebCodecs H.264 support.

INFO

The ping-pong loop plays the animation forward then reverses it, creating a seamless infinite loop with no visible cut point.

Tips for smaller file sizes:

• Record 4–6 seconds rather than longer clips
• Keep the canvas at 1280 × 720 or smaller for web use
• Lower the Speed slider before recording for a calmer, more compressed clip

HTML — Download a standalone gradient file

When to use: Live web embedding, sharing a gradient that stays animated, archiving a gradient configuration.

1. Click Export Code
2. In the modal, click Download Code to save the .html file

The exported file is completely self-contained — it includes the WebGL shader, shader and effect settings, and the rendering loop. It has no external dependencies and works offline in a browser with WebGL support.

What you can do with the exported HTML:

Use case	How
Embed in a website	Drop it into an <iframe>
Full-screen background	Open directly in a browser tab
Share with a client	Send the single file — opens in a browser with WebGL support
Archive a configuration	Shader, effect, and camera settings are embedded

<iframe
  src="your-gradient.html"
  style="width:100%; height:100%; border:none;"
></iframe>

Download param code

The Download Param Code button in the Export Code modal saves a small PNG containing a DataMatrix restore code. To keep the code compact and easy to scan, the image contains a short ID while the full gradient parameters are stored by GradLab's backend.

To restore it later, use Upload Image / Param Code in the Palette section or drag the PNG anywhere onto the GradLab page. GradLab retrieves the saved parameters and applies them automatically. An internet connection is required, and the PNG should be treated as the recovery key for that saved configuration.

Why keep Param Code?

We want future artwork sharing to use a compact, distinctive visual code: share a small image and let someone restore editable gradient settings. The current format is DataMatrix. Encoding only a short ID keeps the graphic small and easy to scan as the number of settings grows.

Early on, we considered encoding the complete configuration directly into the graphic so saving and restoring could happen entirely locally. GradLab has many settings, and a small DataMatrix has limited capacity. Larger matrices can hold more data, but embedding the full configuration would make the pattern larger and denser, moving away from the simple, visually distinctive code we want people to share.

The current code therefore contains a short string that identifies the stored configuration; GradLab uses it to retrieve the corresponding settings from the backend. It is a lookup key, not the complete configuration compressed into a few characters, and it is not encryption. Backend storage is a tradeoff for compact codes and configuration recovery, rather than an aim to collect user data. The implementation does store configurations you explicitly export; the scope is described below.

We still want to explore a fully local approach. If you have an encoding, compression, or file-packaging idea that combines a compact graphic with complete configuration recovery, please share it through Feedback or email. Existing Param Codes still require the backend and an internet connection; a fully local version is a direction we want to explore, not a feature currently available.

Param Code does not include the original diffusion background, canvas dimensions, export scale, or current animation/pointer state. Re-upload the background after restoring image diffusion.

Stored data and privacy

This feature sends your creative settings to GradLab's backend only when you click Download Param Code. The record includes colors, effect settings, camera position, and custom ASCII text. It does not include your feedback email or the original uploaded image files.

Anyone with the Param Code or its short ID can retrieve and restore the settings without signing in. It is a sharing and recovery token, not an access-controlled private backup. Do not include sensitive information in custom text you plan to share.

Records currently have no automatic expiry, and there is no user-facing delete or revoke action yet. Restoration depends on the GradLab service being available. To save locally without using the parameter storage service, choose Download Code for a standalone HTML file. HTML also contains your creative settings, so check custom text before sharing it.

Comparing export formats

Format	File type	Animated	Dependencies	Best for
PNG	.png	No	None	Static design, print
Video	.mp4	Yes	None	Web backgrounds, social video
HTML	.html	Yes	None	Web embedding, sharing
Param Code	.png DataMatrix	No	GradLab service	Restoring and sharing editable settings

Related

• Animated gradient background
• Gradient video background
• Embed a gradient in your website