Can I change the colours of a gradient background?

Yes. You can recolour an item or the whole grid on the page, and adjust size, opacity and rotation.

How can I export a gradient background?

You can copy the SVG code or export CSS, PNG, WebP, JPG, a React component or a data URI.

Can I use a free gradient background in a commercial project?

A free account covers personal projects. Pro and Max accounts get a commercial licence for items they download, and that licence stays in place.

Free gradient SVG backgrounds

22 SVGs

Search the library

Browse free gradient SVG backgrounds for page headers, presentation slides, social posts and app screens. A gradient can add colour behind text, frame a product image or give a section its own look. Each item is real SVG code made by AMNT’s own models and checked by a judge before publication.

You can recolour one background or the whole grid on this page. You can also change size, opacity and rotation before you export. Copy the SVG code, use CSS as a background-image or mask-image data URI, or export a PNG, WebP or JPG. Free items are available for personal projects with a free account. No credit line is needed.

landscape sky night sun sea trees horizon nature sand desert snow hills

Packs

Sets drawn in one style.

Flat Nature Backgrounds

22 SVGs · Free 15 · Premium 7

Not what you need?

Describe it: the SVG studio opens with this style filled in.

More backgrounds

Questions

Can I change the colours of a gradient background?: Yes. You can recolour an item or the whole grid on the page, and adjust size, opacity and rotation.
How can I export a gradient background?: You can copy the SVG code or export CSS, PNG, WebP, JPG, a React component or a data URI.
Can I use a free gradient background in a commercial project?: A free account covers personal projects. Pro and Max accounts get a commercial licence for items they download, and that licence stays in place.