6 Best Free Online Blob Maker Websites

Here is a list of the best free online blob maker websites. A blob is a vague shape that is smooth with a random jelly-like appearance. Blobs do not have any specific purpose but these can be used in the user interface design on the web. You can use it as a background element or an interactive design element on the web page. To be able to do that, you have to make the blob first.

This post covers 6 free websites where you can make the blobs online. All these websites have their own take on blob generation. Some websites can generate multiple types of blobs whereas some are limited to a solid or outline blob. In both cases, you can configure the parameters of the blob to make a customized appearance. You can pick the color, set edges, smoothness, and more. With that said, let’s go through the list to check these out in detail.

My Favorite Online Blob Maker

MagicPattern.design is my favorite website on this list to make blobs online. This website can make 6 types of blobs in total. This also includes an image blob and a pattern blob. It lets you apply a grain filter on top of the blob. Another highlight of this website is that it lets you export the blob in multiple file formats as well as code.

You can check out our other lists of the best free online CSS Shape Generator websites, online CSS Flexbox Generator websites, and online CSS Border Radius Generator websites.

Overview Table:

WebsitesBlob TypeOutputAdditional Options
MagicPattern.designMultiplePNG, JPG, SVG, CSSFilters
SuperDesigner.coMultiplePNG, JPG, SVG, SVG CodePatterns
AngryTools.comSolid/GradientSVG CodeAnimation
BlobMaker.appSolidSVG, SVG Codex


MagicPattern.design is a free website that offers a collection of online tools. It has a free blob maker tool. This tool lets you make multiple types of blobs. At the top of the left side, you can select whether you want to make a solid, outline, gradient, image, or pattern blob. Based on your selection, you can customize the respective blob parameter. Furthermore, you can set the edges and smoothness. You can also apply a grain filter if you want. This way, you can generate the blob. Once the blob is generated, you can export it as a PNG, JPG, or SVG file. You can also copy the CSS code for the blob.


  • Blob type(s): Solid, Outline, Linear Gradient, Radial Gradient, Image, and Pattern.
  • Parameters: Edges, Smoothness, and Grain Filter.
  • Output: PNG, JPG, SVG, and CSS Code.


SuperDesigner.co offers a free online blob generator tool. This tool allows you to generate regular, gradient, stacked, dual, and pattern blobs. You can select the type of blob you want to generate. Based on your selection, it loads a property of the blob that you can customize. Other than that, you can set the edges, smoothness, and outline of the blob. With that, you can make a desired blob and then export it to PNG, JPG, or SVG. You can also set the scale of the output and get SVG code as well.


  • Blob type(s): Regular, Gradient, Stacked, Dual, and Patten.
  • Parameters: Edges, Smoothness, and Outline.
  • Output: PNG, JPG, SVG, and SVG Code.


AngryTools.com has a free online blob maker tool. This is a simple tool that gives you the SVG code for the blob you make. It can make solid and gradient blobs. You can select the type of blob you want to make and pick the colors accordingly. After that, you can pick whether you want to add animation to the blob or not. If you want to add animation, you can go with a float and rotate animation. Otherwise, you can go with no animation options. In the end, this tool shows the SVG code for the blob. You can copy that code and add the blob anywhere possible.


  • Blob type(s): Solid and Gradient.
  • Parameters: Animation: Float and Rotate.
  • Output: SVG Code.


BlobMaker.app is a free online blob maker web application. This app allows you to make a simple blob in seconds. It shows a real-time preview of the blob on the screen. Below that, you get options to pick the blob color and configure edges, and smoothness. You can customize these parameters to make a desired blob shape. Once done, you can use the given button to get the output. Either you can save the blob as an SVG image. Or you can get the SVG code for it.


  • Blob type(s): Regular.
  • Parameters: Edges, Smoothness, and Color.
  • Output: SVG File and SVG Code.


Fah-tool.org offers a free online blob maker tool. This is a rather simple blob maker tool. It has a sample blob on the screen with a few parameters below that. The blob type is limited to solid here. But you can change the dimensions and configure the edges of the parameters. As you make the changes, it updates the CSS code for the blob. Once done, you can copy the CSS code of the blob and use it for your intended purpose.


  • Blob type(s): Solid.
  • Parameters: Edges and Size.
  • Output: CSS Code.


Blob-generator.omar.repl.co is yet another website where you can make blobs online. This tool generates a pattern of blobs. The pattern is somewhat fixed but you can adjust the parameters to make some changes. You can set the number of columns, number of rows, and border-radius and pick the foreground and background colors. Then there are some other parameters you can play with. There is no direct way to save the blob here. It offers a screenshot option that saves the blob as a PNG image.


  • Blob type(s): Pattern.
  • Parameters: Columns, Rows, Size, Border Radius, Colors, Link Probability, Slant Influence, and Grid Scale.
  • Output: PNG.
Related Posts
Write a Comment


Trying to figure out how things work and writing about them all.

About Us

Sample image

We are the team behind some of the most popular tech blogs, like: I LoveFree Software and Windows 8 Freeware.

More About Us