Beta

Waves SVG background, flat

Free
Waves SVG background, flat

Broad, offset waves sweep along the bottom edge to create a layered background. Use it for newsletter headers or community event invitations.

Sign in to download. Free SVGs are free with any account.

waveslayersflowbackground3dflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/V7JrJcF5ogaq/amnt.svg" alt="Waves" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"><rect width="1600" height="900" fill="#F2F5F2"/><path d="M0 635 C270 570 445 705 720 665 C1020 620 1270 535 1600 625 L1600 900 L0 900 Z" fill="#DCE9E5"/><path d="M0 700 C250 775 455 655 720 705 C1010 760 1270 665 1600 690 L1600 900 L0 900 Z" fill="#B9D3CE"/><path d="M0 755 C290 685 470 805 780 765 C1080 725 1320 770 1600 730 L1600 900 L0 900 Z" fill="#8FB8B2"/><path d="M0 810 C255 850 480 755 750 820 C1020 885 1290 785 1600 815 L1600 900 L0 900 Z" fill="#618F91"/><path d="M0 865 C300 825 515 900 825 855 C1130 810 1350 885 1600 850 L1600 900 L0 900 Z" fill="#426F78"/></svg>
CSS background-image
.waves {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/V7JrJcF5ogaq/amnt.svg");
  background-size: contain;
}
React
import WavesSvg from "./waves.jsx"; // from the React tab above

<WavesSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Waves: Broad layered wave shapes sweep along the bottom edge, with offset edges suggesting depth. as part of the pack 3D Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

Rest of 3D Backgrounds, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence