Blue Green SVG background, flat

Free

Preview on the whole page

Wide leaf-green shapes cross the top and bottom of a muted blue field, leaving room in the middle. Use it for a nature blog header or an environmental report cover.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

blue green nature website background mesh gradient background flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/egqVmpfHGAcZ/amnt.svg" alt="Blue Green" 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="#648BAD"/><path d="M0 0H1600V153C1371 211 1194 105 980 145C767 184 647 278 418 225C258 188 135 148 0 195Z" fill="#73A77A"/><path d="M0 0H1600V68C1394 127 1201 38 987 77C765 117 624 205 408 150C252 111 130 75 0 119Z" fill="#8DBB82"/><path d="M0 762C218 691 363 778 572 728C785 677 918 645 1101 708C1285 771 1428 711 1600 747V900H0Z" fill="#669C76"/><path d="M0 837C214 770 371 854 584 801C788 750 934 720 1110 783C1291 845 1447 788 1600 821V900H0Z" fill="#82B582"/></svg>

CSS background-image

.blue-green {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/egqVmpfHGAcZ/amnt.svg");
  background-size: contain;
}

React

import BlueGreenSvg from "./blue-green.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Blue Green: Full muted blue field with wide leaf-green shapes crossing the top and bottom edges. as part of the pack Mesh Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

Rest of Mesh 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