Elementor VS The Blob

How to use eight-point border-radius to create the popular blob effect seen on many websites.

Eight Point Border Radius CSS

For this tutorial, we will be using the following website to create our blob CSS. Right-click and open the following link in a new tab.

Insert An Image Block

From your Elementor panel, drag an image widget to the page and select an image.

Use The Generator To Create Your Shape

Copy The CSS.

Copy the CSS from the generator and have it ready.

Adding A CSS Class For Our Element

Here I am creating a CSS class and naming it blobby. We will add this to the Custom CSS tab in Elementor or add it to your theme customizer for multiple uses.

.blobby img {border-radius: 39% 28% 64% 20% / 28% 16% 57% 66%}

Applying The Class To Our Element(s)

We need to apply our class to this element or any other we like by adding the class under Advanced Custom CSS Classes.

You Now Have The Blob Effect For Your Image

Bonus: Using The CSS Class In Gutenberg

If you added the CSS class to your themes customizer/additional CSS, You may also apply it to images in the Gutenberg post as well.


A Demo Blob Image In Gutenberg

The Blob Has Now Been Conquered

This area is used to display additional content that you would like to be hidden. This can be useful for mobile users. For more information on this area and how to make one visit the Read More Toggle Tutorial.

Getting Stuck?

We Can Help You

if you are having trouble with Wordpress or Elementor, we do our best to help. We can walk you through an issue via email, phone, or TeamViewer.

We can also create Elementor templates for sections or pages to help you achieve a look or style you need. These can be easily exported/imported to your website via JSON files.

Hourly Rates Will Apply.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on print
Share on email

Farhad Black Suede Heels

$129
99 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Leather Purse

$159
99 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Printed Trench

$199
159 $
  •  

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Silk Scarf

$59
49 $
  •  

Fabulous items for fabulous prices.
You deserve it.