Pure CSS Animated Blobs


Blobz is a free tool for making pure animated CSS blobs. Made by Torus Kit


Place the downloaded blobz.css or blobz.min.css file to your assets folder, that add a link into the <head> tag


How to use

To place an animated blob on your site, follow these steps:

Because the blobs are always 100% width, they will fit any screen size.


Blobz tool is using CSS custom properties (aka CSS variables), so it is super easy to customize them. These settings can be placed as inline style or in separate <style> definition.

--timestring30sTime of animation loop in seconds or milliseconds
--amountint2Amount (size) of deformation
--fillstring#000Fill color of blob


Example of blobs customization

Default settings


Customized settings

Custom settings for --time, --amount and --fill