Menu

Beta
Sign in
Beta
Gradient Blob SVG background, flat

Gradient Blob SVG background, flat

Three nested bands of solid colour fill a blob entering from the left, shifting from dark to light. Try it on a report cover or webinar slide.

Free · from Blob Backgrounds, Flat

Similar SVGs

More from Blob Backgrounds, Flat

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jOyInv03r0KK/amnt.svg" alt="Gradient Blob" 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="#F6F4EE"/><path d="M-120 80 C40 12 216 66 346 172 C482 283 544 402 526 525 C506 659 396 778 226 840 C96 888 -38 862 -120 810 Z" fill="#D5E2D8"/><path d="M-120 154 C5 98 150 132 260 220 C376 313 432 413 420 518 C405 628 316 728 183 778 C67 821 -44 794 -120 752 Z" fill="#9FBEAF"/><path d="M-120 236 C-22 190 91 213 172 280 C264 355 314 432 305 518 C296 605 230 685 125 724 C29 758 -56 735 -120 699 Z" fill="#527B70"/></svg>
CSS background-image
.gradient-blob {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/jOyInv03r0KK/amnt.svg");
  background-size: contain;
}
React
import GradientBlobSvg from "./gradient-blob.jsx"; // from the React tab above

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

Tags

blobcolourbandsbackgroundblobsflat

Made with AMNT

AMNT SVG 1.1 drew this from the words Gradient Blob: A blob at the left edge contains three nested bands of solid colour, shifting from dark to light. as part of the pack Blob Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

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

Settings