CSS, SVG, PNG, JPG or WebP: which gradient format should I use?
Choose CSS for web backgrounds, PNG for lossless images and JPG or WebP for compressed images. Check embedded artwork before treating an SVG as resolution-independent.
What can FreeeGradients export?
Every gradient has an Export dialog with PNG, JPG, SVG, WebP, HTML, CSS, React and JSON tabs. Choose a colour variation first so the exported artwork matches your selection. CSS and code formats serve a different purpose from image formats: a PNG can be placed in a slide, while CSS belongs in a website stylesheet.
When should I use an image instead of CSS?
Use an image when your destination accepts uploads rather than stylesheets: slide decks, social graphics, design frames and document covers. Match the aspect ratio to the destination before downloading. A portrait crop can remove side highlights from a wide composition; use the export preview to check what remains.
Is every SVG a fully editable vector gradient?
No. Some designs use native gradient geometry, while detailed compositions can include filters or embedded raster artwork. SVG is the container, not a promise that every pixel is vector-based or that a design tool will preserve its rendering. If a tool changes the appearance on import, use PNG at the required dimensions.
Which exports depend on a hosted image?
Native CSS backgrounds use CSS functions directly. Complex CSS exports reference a versioned artwork URL; retain that URL or host the asset yourself and update the CSS. HTML exports embed the SVG and React exports embed complex artwork. JSON contains integration metadata and URLs; it is not an editable project file.
At a glance
| Format | Choose it for | Consideration |
|---|---|---|
| CSS | Responsive website backgrounds | Detailed designs can reference an image URL. |
| SVG | Artwork in a compatible browser or design tool | May include filters or raster images. |
| PNG | Lossless design, slide and social images | Larger files; choose the final dimensions. |
| JPG | Widely compatible raster backgrounds | Lossy compression can show gradient banding. |
| WebP | Compressed website background images | Check quality and destination support. |
| React / HTML | An implementation starting point | Add your own layout and readable content. |
| JSON | Palette and integration metadata | Not a design-editor import format. |
Try these soft & smooth backgrounds
Open an example to compare palettes and export the background.
