Add a blob shape to your image with a cool bouncy hover effect

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

Learn how to use the CSS-only shape() function to create a dynamic blob shape with a hover effect. The code is accessible via an online generator, but it currently works only in Chrome.

Blob shape with hover effect

Sadly it’s just “Chrome-only for now”.

I think the Chrome-only compatibility is a major concern. From a personal perspective, I would much rather use code that is supported across all/most browsers instead of targeting one specific browser over all others.