The SVG Blob widget by Atomic Addons draws an organic blob shape that keeps changing its outline, a soft decoration behind a heading or a frame for a portrait. You pick one of ten shapes and fill it with a flat color, a two-color gradient or an image; the widget then morphs the shape back and forth between two outlines. This guide covers adding the widget, choosing the fill and shape and timing the animation.
Enable the SVG Blob Widget
SVG Blob is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for SVG Blob. You can also open the Creative category.
- 4
Turn the SVG Blob widget on.
- 5
Click Save Settings.
Add the SVG Blob Widget
SVG Blob works on any page:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for SVG Blob. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
The blob fills the width of its column and stays square, so the column decides its size until you set one under Style.
Blob Content
Open the widget and go to Content → Blob Content:
- 1
Select Type: What fills the blob: Color (the default), Gradient Color or Image.
- 2
Choose Image: Image only: the picture to show inside the blob. It covers the whole shape and is cropped at the edges rather than stretched.
- 3
Image Size: Image only: which size WordPress serves, Large by default. Pick a bigger size for a large blob, or Custom to type your own dimensions.
- 4
Show Stroke: Color only: adds an outline around the blob. Off by default. Its color and weight are on the Style tab.
- 5
Select Shape Style: Which blob to draw: Shape 01 (the default) to Shape 10. Each shape comes with its own pair of outlines to morph between.
- 6
Loop: Keeps the blob moving for as long as the page is open. On by default. Turn it off and the blob morphs to its second outline and back once, then stops.
- 7
Duration: How long one change of outline takes, in milliseconds, up to 10000. Left empty, it takes 2000 (2 seconds). A higher number gives a slower, calmer movement.
- 8
Delay: How long the blob waits before it starts to move, in milliseconds. 10 when left empty.
- 9
End Delay: How long the blob rests on an outline before it moves again, in milliseconds. 10 when left empty.
The colors of a Gradient Color blob are set on the Style tab, under Blob Style → Color Primary and Color Secondary. Left empty, the gradient runs from near-black to light gray.
Visitors whose device asks for reduced motion see the blob standing still in its first outline.
Style the SVG Blob
Everything below is on the Style tab:
- Blob Style — SVG Color fills a Color blob (light gray by default); Stroke Color and Stroke Weight (5px by default) style the outline when Show Stroke is on; Color Primary and Color Secondary are the two gradient colors. Width and Height size the blob, per screen size; Opacity and CSS Filters (blur, brightness, contrast, saturation, hue) work for every fill.
- Advanced Blob Style — only with Gradient Color. Primary Color Offset (%) and Secondary Color Offset (%) set where each color starts and ends; Position X1, Position X2, Position Y1 and Position Y2 set the start and end points of the gradient's direction.
Set only Width to keep the blob round. When you also set Height to a different value, the shape stretches to fill both.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.