Blue Purple SVG background, flat

Free

Preview on the whole page

A quiet blue centre sits between broad violet and indigo shapes entering from opposite corners. Use it behind a website header or on a presentation title slide.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

blue purple indigo 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/0_AAH6zjb_G5/amnt.svg" alt="Blue Purple" 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="#416FD2"/><path d="M0 0H690C584 52 532 133 469 215C379 332 246 371 0 389Z" fill="#6857BB"/><path d="M0 0H425C361 77 326 164 249 221C187 267 106 290 0 301Z" fill="#8164C6"/><path d="M1600 900H895C1037 848 1084 774 1163 690C1270 576 1399 559 1600 541Z" fill="#343E9C"/><path d="M1600 900H1191C1275 838 1299 759 1385 708C1442 674 1513 661 1600 656Z" fill="#4C48AC"/></svg>

CSS background-image

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

React

import BluePurpleSvg from "./blue-purple.jsx"; // from the React tab above

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

Made with AMNT

AMNT SVG 1.1 drew this from the words Blue Purple: Full blue field with broad violet and indigo shapes entering from opposite corners; quiet blue centre. 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