Give a blob shape look to any image with one line of CSS code. For the best effect, make sure your image height and width values are same.
Preview: Before and After
Step 1
Add image to your layout, make sure width and height is same.
Step 2
Add CSS class vc-image-1 to the image. If using gutenberg blocks layout, click on image and navigate to the bottom right part of the panel “advanced” section. Expand that section and add class name in the “additional CSS classes” box.
Step 3
Add the following CSS code
.vc-image-1 img {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
}Additional Information
Use this tool to generate “border-radius” code for more customized blob shape
Image Credits: https://unsplash.com/photos/YLiM1QcwvHU
💬 Subscribe for Free, for more CSS magic.
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login