Elementor VS The Blob

Using an eight-point border-radius CSS to create image blob effects 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

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest