Docs

Put a blob where it belongs.

Guides for using a blob shape in HTML and CSS, in React, in Flutter, and in Figma, Canva, PowerPoint, Keynote, WordPress and Webflow.

Web

Three ways to put a blob on a page: inline SVG, an img tag, or a CSS background. Plus sizing, clip-path, accessibility and file size.

React

Drop the exported TSX component into a project, drive size and color with props, clip an image with the shape, and keep SVG ids unique.

Flutter

Use the exported CustomPainter, scale the path from a 500 by 500 space to any widget size, clip images with ClipPath and fill a blob with a gradient.

Design 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.