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
