GradientLab field guide
Gradient Export Formats: PNG, JPG, WebP, MP4, WebM or GIF?
Choose the format for where your gradient will live. Start with PNG for a still design asset, compare JPG and WebP for web delivery, and use video when motion is part of the result. The file you export is a finished asset, not the editable shader.
Try it in the gradient editor| Format | Good starting point for | Available on |
|---|---|---|
| PNG | A lossless still image for layouts and further design work | Free and Pro |
| JPG | A still background when the destination expects JPEG | Pro |
| WebP | A still web image; compare its size and appearance with JPG | Pro |
| MP4 | A finished animation for a website or video workflow | Pro |
| WebM | An additional video source when the destination supports it | Pro |
| GIF | A short animation where GIF is specifically required | Pro |
What can I export for free?
Free exports are PNG images up to 800 × 800 pixels, with a watermark and a limit of 20 exports in a rolling 24-hour period. You can explore the editor before choosing whether you need the additional output formats.
Pro supports PNG, JPG, WebP, MP4, WebM, and GIF without a watermark, with 200 exports in a rolling 24-hour period. Image settings support up to 4096 × 4096 pixels; video output is capped at 3840 × 2160. Larger exports take more memory and rendering time, so test on the device you will use.
PNG, JPG or WebP for a still gradient?
PNG preserves image detail without lossy compression. It is a useful starting point for artwork you will place into another design, especially when you want to inspect subtle transitions before optimizing delivery.
JPG and WebP are worth comparing for a finished web background. Export at the same dimensions, inspect the smoothest color transitions for banding or artifacts, and compare the actual files. The smallest acceptable result depends on the artwork and quality setting; no format is always the smallest.
Do not confuse a format capability with an export feature. For example, a format may support transparency in general, but that does not mean every GradientLab export supplies a transparent background. Check the resulting file in the destination application.
MP4, WebM or GIF for an animated gradient?
For a website, start by testing MP4 in your target browsers and devices. WebM can be an additional source if your site builder or implementation accepts it. Container, codec, file size, and playback behavior all matter; check the exported file in the actual destination.
Use GIF when the destination specifically needs it, rather than as the automatic choice for a full-screen hero. Preview the color transitions and compare its file size with a video export before publishing.
Pro animation exports can run up to 60 seconds. Start with a short draft and watch it repeat. A loop control does not guarantee that every effect combination will meet seamlessly at the first and last frame.
Does an export include editable CSS or GLSL?
No. These exports are rendered image or video assets, not GLSL source or an equivalent CSS recreation of the shader effects. Save the gradient in your library if you want to return to its visual controls and make another version.
A public gradient link is a separate sharing option. Visibility and permissions determine what another person can view or open in the editor. Downloading a video does not give the recipient the original editable gradient configuration.
What should I check before publishing a website background?
Check the composition at desktop and mobile aspect ratios, then choose output dimensions for the actual display area. A tall mobile crop can lose the focal point of a wide design. Keep headings and buttons as readable HTML rather than baking them into the artwork.
Provide a matching still poster for video, a pause control for persistent motion, and a reduced-motion alternative. Muted inline video may autoplay, but playback can still be blocked; the page must work when only the still appears.
Measure the finished page after adding the asset. If the background delays useful content or makes scrolling feel heavy, try smaller dimensions, a shorter clip, or a still image. The best export is the one that works in the final design.