Repeatable Seeded Shapes
Every blob is tied to a deterministic numeric seed so you can save, share, and reproduce exact shapes effortlessly.
Seeded 8-Value CSS Border-Radius
CSS Blob Generator
Generate organic CSS blobs with repeatable seeds, adjustable irregularity, mirror symmetry, gradients, and standalone SVG export.
Blob Preview
Generate repeatable organic shapes powered by 8-value CSS border-radius.
Seed #1847
Runs 100% locally in your browser.
Generated CSS
Copy the CSS blob rule or export a standalone SVG file.
.blob {
width: 420px;
max-width: 100%;
aspect-ratio: 420 / 340;
border-radius: 49% 45% 61% 30% / 60% 68% 32% 56%;
background: linear-gradient(135deg, #14b8a6, #0f1d3a);
transform: rotate(0deg);
}How to Create Organic CSS Blobs
1
Generate & Save Variations
Click New Blob to explore seeded organic shapes and save your favorites so you can compare and switch back anytime.
2
Tune Irregularity & Gradient
Adjust irregularity, toggle mirror symmetry, resize dimensions, rotate the blob, and customize solid or gradient colors.
3
Copy CSS or Download SVG
Copy the lightweight CSS rule directly into your stylesheet or download a matching SVG vector asset.
CSS Blob Generator Features
CSS & SVG Dual Export
Export pure 8-value CSS border-radius rules for DOM containers or download a standalone SVG file for design tools.
100% Browser-Local
No server calls or uploads. All geometry, gradients, and exports run instantaneously in your browser.
Frequently Asked Questions
How does a CSS blob work without SVG?
CSS blobs use the 8-value `border-radius` syntax (`h1 h2 h3 h4 / v1 v2 v3 v4`). By assigning different horizontal and vertical percentage radii to each corner, a standard HTML `<div>` takes on a smooth organic shape.
What is the Seed number used for?
The seed drives a deterministic pseudo-random generator. Sharing or entering the same seed number with the same irregularity and symmetry settings always reproduces the exact same blob shape.
Can I export the CSS blob as an SVG file?
Yes. Click Download (.svg) to export a standalone SVG vector file with matching dimensions, gradient fill, and rotation.
What is the difference between CSS Blob Generator and SVG Blob Generator?
The CSS Blob Generator creates lightweight `border-radius` CSS for HTML containers (ideal for cards, avatars, and hero backdrops), while the SVG Blob Generator creates multi-point cubic Bézier vector paths.
Is my design data uploaded anywhere?
No. All blob generation, previews, saved variations, and exports happen locally in your browser.