CSS Blobs Generator

Generate customizable, beautiful gradient blob shapes for your websites

Note

This project was created mainly for learning purposes such as repo management, CI/CD, monorepo, package maintenance, etc.

Features 🌟

• Customizable Blobs 🛠: Adjust the size, color, and complexity of your blobs.
• Live Preview 👀: See changes in real-time as you customize your blob.
• Copy CSS 📄: Easily copy the CSS of your customized blob to your clipboard.
• Nuxt 3 Powered 🔥: Enjoy the latest features and optimizations of Nuxt 3.
• TypeScript Support 📚: Reliable and maintainable codebase with TypeScript.
• Fully Tested 🧪: Unit and E2E tests utilizing Vitest and Playwright.
• Formatted and Linted 🧹: The entire repo is formatted and linted using ESLint.
• Published Package 📦: A package that powers the interactive website.

Package

Installation

npm i @yuvalkarif/gradient-blob

Usage Example

import { gb, gbc } from '@yuvalkarif/gradient-blob'

// Basic Usage
const gradientBlob = gb(10)
//     ^ -> "96% 25%, 19% 32%, 42% 91%, 82% 3%, 46% 52%, 35% 19%, 17% 24%, 83% 88%, 78% 86%, 26% 18%"

// Complicated Usage
const { gb } = gbc({ cacheChance: 50 })
const gradientBlob = gb(10, { clipPathProperty: true })
//     ^ -> "clip-path: polygon(96% 25%, 19% 32%, 42% 91%, 82% 3%, 46% 52%, 35% 19%, 17% 24%, 83% 88%, 78% 86%, 26% 18%)"

Local Development 🚀

To run CSS Blobs Generator locally, clone the repository and install the dependencies:

npm install && npm run dev