Design tools

Blob shapes in design and presentation tools

Bring a blob into Figma, Canva, PowerPoint, Keynote, WordPress and Webflow: which file to pick, how to keep it editable and how to use it as a mask.

Updated September 18, 2026

Two files cover every tool on this page. The SVG stays editable and sharp at any size; the PNG goes anywhere that cannot read vectors. Export the SVG first and fall back to a PNG at 1024 or 2048 pixels when a tool refuses it.

Figma

Figma reads SVG directly. Drag the downloaded file onto the canvas, or copy the markup from the generator and paste it with the usual paste shortcut. Either route produces a vector layer, not an image, so the fill, stroke and individual nodes stay editable.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
  <path d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z" fill="#1e8fe5"/>
</svg>

Pasted markup arrives as a frame wrapping the vector. Ungroup it once if you want the path on its own, then set the fill from your own color styles.

To crop a photo with the shape, place the vector on top of the image, select both layers and use the mask action in the right-click menu. The vector becomes the mask and the image shows only inside it. Resizing the mask afterwards resizes the crop, so build the mask at the size you need and adjust the image inside it.

Two details save time later: give the layer a name that describes the shape, and turn it into a component if the same blob appears on several frames.

Canva

Canva treats the shape as an uploaded element. Open Uploads, add the file, then click it to drop it onto the design. It behaves like any other element: drag the corner handles to resize, use the transparency control to soften it, send it behind your text.

Upload the SVG when you can, because it stays clean when scaled up. If your Canva account rejects the file, upload the PNG at 2048 pixels instead; at that size it holds up across a full-bleed background. Canva does not recolor an uploaded SVG, so set the color in the generator before you export.

For a photo inside a blob, use a Canva frame or the image mask feature with the blob as the mask, or export the image fill directly from the generator using the image mode.

PowerPoint and Keynote

PowerPoint reads SVG. Insert, Pictures, This Device, then pick the file. Once placed, the Graphics Format tab offers a convert-to-shape action that turns the vector into a native PowerPoint shape, after which the built-in fill, outline and effect controls apply to it. That is the cleanest way to match a blob to a deck’s theme colors.

Keynote does not import SVG. Use the PNG: 1024 pixels for a decorative shape in a corner, 2048 for anything that spans the slide or gets projected. Drag the file onto the slide and Keynote places it with a transparent background.

A blob works best in a deck as a background behind a headline, a colored container for a photo, or a repeated accent on section dividers. Keep it to one or two per slide.

WordPress and Webflow

In WordPress, add the file through Media, then insert it with an Image block. PNG uploads work out of the box. SVG uploads are blocked by default because an SVG can carry scripts, so either ask an administrator to allow the format, or use the PNG. If SVG uploads are enabled on your site, keep the markup to the path the generator produced and nothing else.

Webflow accepts both formats in the Assets panel. Upload, then drag the asset into the page or set it as a background image on a section. For a shape you want to recolor with interactions later, paste the markup into an Embed element instead and style the path there.

<div class="blob-wrap">
  <img src="/assets/blob.svg" alt="" width="480" height="480" loading="lazy" />
</div>

Add an empty alt attribute in both platforms when the blob is decoration, so screen readers skip it.

Which file to pick

Use SVG for anything on the web, in Figma, or in PowerPoint. Use PNG for Keynote, for tools that reject SVG uploads, and when a blob is filled with a photo and you want one flat file. Export PNG at 512 pixels for small accents, 1024 for slides and cards, and 2048 for backgrounds and print-adjacent work.

Common questions

Can I change the color after importing? In Figma and in PowerPoint after converting to a shape, yes. In Canva, in Keynote and in anything that placed the file as an image, no. Set the color in the generator and export again, which takes a few seconds.

Why does my SVG look pixelated in a presentation? It usually is not the SVG. Check whether the tool converted the file to a bitmap on import, which Keynote and some Canva flows do. If it did, replace it with the 2048 pixel PNG export, which has enough resolution for a full-screen slide.

How do I get the exact same blob again next month? Every blob has its own URL that carries the seed and the settings. Save the link, or use the save action and find it later on the saved page. Opening that URL rebuilds the identical shape.