Blob Generator

To learn more about this widget, check out our Blob Generator widget page.

Blobs have become a common background filler pattern in the modern web design as it adds a nice touch of fun, randomness, and flair to the design.

Quick intro to Blob Generator:

Blob Generator is a new widget element introduced by Designer Powerup to generate organic random blob SVGs and control the size and complexity from within Elementor.

A Blob Generator within Elementor solves these issues:

  • Difficult to create a blob manually using the Pen tool unless you are a Pro designer.
  • Hassle of manually exporting, saving and importing the blobs onto the site if you’re using a generator like this one.
  • Poor WordPress support for SVGs (which is why 3rd party devs had to create SVG support plugins like these)
  • Lack of Advanced Elementor feature controls if copying the SVG to the Custom HTML widget.
  • Loading as a separate image (1 more resource request per blob) if using it in the Image Widget.

Getting the most value out of Blob Generator:

Here are some different ways you can use the Blob Generator in your designs:

  • Make empty sections stand out more
  • Use blobs behind icons to add a visual flair to your designs
  • Use blobs in your hero section to create some pretty unique designs

How to use Designer Powerup’s Blob Generator widget?

  1. Drag the Blob Generator element from the panel.
  2. Set the required color and size.
  3. Adjust the blob shape by changing the Complexity and Contrast controls.
  4. Click on the “Generate Blob” button.
Blob Generator
Blob Generator

If you don’t like a particular shape, you can simply click on “Generate Blob” button again to generate a different shape. You can keep generating random blob shapes until you get the one you like.

No JavaScript library or code is added on the front-end for these blobs. All the magic happens in the backend when creating the blob where the widget automatically generates valid SVG in real-time and saves it to the post. After that, it’s just a normal HTML element like any other.

Note:

  • The blob generator generates a random shape every time you click on the ‘Generate Blob’ button.
  • The blob currently doesn’t support image masking.
  • The blobs generated don’t affect the loading speed of your website as they are SVG shapes which become normal HTML elements after the shape is saved.
  • You cannot apply Designer Powerup’s multi-layer gradients to the blob the shapes.
Was this page helpful?