Can I change the colour of a background?

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

How can I use a background in CSS?

Copy it as a CSS background-image or mask-image data URI.

Can I use these backgrounds in a commercial project?

A Pro or Max account gives you a commercial licence for items you download. The licence is fixed at download and stays in place forever.

Free animated SVG backgrounds

21 SVGs

Search the library

Browse free animated SVG backgrounds for page headers, section breaks, landing pages and personal projects. Look for subjects such as waves, stars, rain and floating shapes. Each item is real SVG code made by AMNT’s own models and checked by a judge before it is published. Free items are available for personal projects with a free account.

You can recolour one background or the whole grid on this page. You can also change stroke width, size, opacity and rotation. When you are ready, copy the SVG code or CSS as a background-image or mask-image data URI. You can also export PNG, WebP, JPG, a React component or a data URI.

weather water geometry pattern sun space sky horizon waves spiral dots raindrops

Packs

Sets drawn in one style.

Animated Backgrounds, Flat

21 SVGs · Free 14 · Premium 7

Not what you need?

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

More backgrounds

Questions

Can I change the colour of a background?: Yes. You can recolour an item or the whole grid, and adjust size, opacity, rotation and stroke width.
How can I use a background in CSS?: Copy it as a CSS background-image or mask-image data URI.
Can I use these backgrounds in a commercial project?: A Pro or Max account gives you a commercial licence for items you download. The licence is fixed at download and stays in place forever.