This tutorial is going to cover a number of methods that you can use to add blob images to your website. In the past couple of years, incorporating blobs into your website has exploded in popularity as many major SAAS product offerings have adopted this unique shape.

Many are saying that it's the complete opposite of the predominant flat/angular UI trend that has been around since the mid 2010s.

Typically, images are placed in front of blobs, Or specifically masked in them. In a recent web design project of ours, we used the blob images to add a modern touch to the website , and wanted to discuss some of the main methods that you can use to add blob images (or just basic blob shapes) to your website.

Examples Of Websites That Use Blobs

Many websites are incorporating this trend into their general design, using images that have no discernible corners or edges. Here are a couple examples of this trend found in the wild:

The Elementor website uses a unique blob image that has a solid photo blob as a background, while overlaying screenshots of their tool on top. This gives a nice 3D effect to the whole visual.

Nordcloud, a leading European cloud implementation company, incorporates blobs throughout their website.

SaltInOurHair, An award-winning blog uses image blobs as featured images.

Now that we've feasted our eyes on a couple of visual examples, let's run through a couple of methods that you can use to easily generate blobs and blob images for your website.

Creating Blobs With Blobmaker

If you're looking to incorporate simple blobs (without masking images over them) you can easily do this by using a web application called Blobmaker.

You can select the distortion, number of points, difference between points, and color to create a completely random blob for your website. You can then easily implement this into your website by copy and pasting SVG code, or downloading it as an SVG, converting it to whatever image format you'd like, and then re uploading it to your site.

This tool is great because it creates completely random blobs based off of your criteria, meaning that you can toggle through it until you find a blob that works well in your website. You can also set the color then in there, making this an all-in-one solution for creating SVG blobs for your website.

Here are a couple of blobs that we generated with this application in a matter of seconds:

Creating image blobs (method one)

if you're looking to create a blob like image for use on your website, you can easily do that by masking an image over a blog using Photoshop.

First, use the blob maker app to generate a random blob. The color doesn't matter, but ensure that you have the complexity and contrast set to be exactly how you want it.

Once you've found the blob for you, downloaded onto computer and load up Photoshop. Place the SVG blob directly into the Photoshop canvas (We recommend using a standard 1000 by 1000 pixel canvas, as we will be exporting a PNG so the dimensions here don't matter).

Once your blob is on the canvas, simply import your image into a layer that overlaps the blob. Right click that image layer and create a clipping mask that applies to the blob underneath. And voila, you now have a blob sized image.

To quickly export this, you can merge the image in blob layer together, right click, and select “quick export as PNG”. Now you have a PNG format of an image blob that you can use on your website.

You can further customize this image by adding a gradient overlay, or having images that are cropped by the blob at the top, but overflow out of the bottom making a 3D effect.

You may be thinking, “well that's cool, but I don't have Photoshop and I don't want to spend any money on this just to create a blob image”. That's why we have method 2, which allows you to create a blob image by using HTML, and a little bit of elbow grease.

Creating a blob image using SVG's and HTML

If we're not looking to go the Photoshop route, and are happy to use an SVG to display our blob, this can also easily be done by using a clip path, and masking an image directly over the SVG blob.

To do this, generate your blob using the app, and then edit the following code:

<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<clipPath id="user-space" clipPathUnits="userSpaceOnUse">
<path fill="#FF0066" d="M49.5,-65.4C58.2,-51.8,55.1,-30.5,54.2,-12.9C53.4,4.7,54.7,18.5,49.1,28.6C43.6,38.6,31.1,44.8,17.6,50.9C4.1,57,-10.5,62.8,-22.5,59.5C-34.5,56.1,-44.1,43.5,-53.7,29.7C-63.3,15.8,-73,0.6,-73.4,-15.7C-73.8,-32,-65,-49.4,-51.2,-62.2C-37.4,-75,-18.7,-83.1,0.9,-84.1C20.4,-85.2,40.9,-79.1,49.5,-65.4Z" transform="translate(100 100)"
			</clipPath>
		</defs>

		<image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="https://source.unsplash.com/random" clip-path="url(#user-space)"/>
	</svg>

Code language: JavaScript (javascript)

Replace the path with the path generated by the blob maker app. The path is what actually ends up making the blob. Then, in the image element, replace the XLink URL with the path to your own photo. Currently, we have it set to use the Unsplash API and fill the blob with a random image (Refresh this page, and the image will change). You can fine tune other elements of the code, but if you're looking for a quick and simple way to add blob shaped images to your website, this is a great option.

However, if you're looking to layer or use a format such as PNG for JPEG, going the Photoshop route is probably a better option.

To add this element into your website, simply copy and paste the HTML code into your site. For example, if you're using Elementor, you can do this with an HTML element. If you're using Gutenberg, you can do this with a Gutenberg HTML block. you can also throw this directly into your theme PHP.

You can manipulate the size by either using CSS to transform the entire element, or increasing the changing the view box attribute values (Increasing them makes your blob smaller).

Other cool blob effects to incorporate into your website

If you're looking for additional blob image effects (or just blob effects in general) here are a couple of codes in the bits that we found on CodePen. To install them on your website, typically you'll need to add the CSS to your stylesheet, HTML to where you want the effect to show up, and JavaScript using either a standalone script or incorporating it via HTML script tags.

Using JavaScript, this blob is responsive to user mouse input. When you touch it with your mouse, the blob reacts by moving in the opposite direction, causing waves throughout its form.

This blob animation takes it a step further and creates a photo realistic 3D rendering that moves and flows. The code pen is titled “AI assistant blob” but it's definitely a cool visual effect that you can incorporate anywhere within your website.

If you're looking for a unique blob like background to incorporate into your website, this code penny uses a collection of SVG's , background images, and animations to create a unique effect. The blobs float around on the screen, intersecting and connecting with each other.

Conclusion

If you're looking to add blobs, image blobs, or animated blobs into your website, this article should have presented you with multiple ways to do this. Using the Photoshop method of creating image blobs is great if you are trying to generate PNG images, while masking SVG's can be done completely on line that comes with the requirement of using the SVG on the website.

You can also make use of the Codepens to incorporate advanced animated blobs on to your website. If you have any questions on how to do anything regarding blogs, websites, and web design, reach out in the comments below.