Blobz

Pure CSS Animated Blobs

Download

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

Install

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.

Settings

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.

Name Type Default Description
--time string 30s Time of animation loop in seconds or milliseconds
--amount int 2 Amount (size) of deformation
--fill string #000 Fill color of blob

Examples

Example of blobs customization

Default settings

Customized settings

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