Place the downloaded blobz.css or blobz.min.css file to your assets folder, that add a link into the <head> tag
;
To place an animated blob on your site, follow these steps:
width or padding to properly size the blobBecause 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.
| 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 |
Example of blobs customization
Custom settings for --time, --amount and --fill
Click the blob to copy the code into clipboard.