How do I use a blob as a CSS clip-path?

Copy CSS gives width and height in pixels plus clip-path: path(…) for the shape you chose. A path() clip uses pixel coordinates from the top-left corner of the element and does not scale with it, so the clip is exact at 200 × 200 (356 × 200 for Wide, 200 × 356 for Tall). For another size, scale the element with a transform or use the SVG. On the Avatar Circle the CSS carries a comment: the circle clip is not included.

How big is the PNG export?

The button number is the length of the 200-unit side. A Square or Avatar Circle blob at 512 is 512 × 512, a Wide one is 911 × 512 and a Tall one is 512 × 911. The largest, 2048, gives 3645 × 2048 for Wide.

How do I keep a blob I like?

Press Save to add it to the favorites strip. A favorite keeps the settings and the seed, so loading it redraws the same blob, and the strip holds up to 8. Without Save, a reload returns to seed 0 with your last settings, and Randomize moves to seed 1, 2 and so on.

What do complexity, contrast and smoothness change?

Complexity (2 to 15) sets the number of points, 3 more than its value. Contrast (1 to 10) sets how far each point can drift from the circle. Smoothness (0 to 100) bends the joins: at 0 they are quadratic curves through the midpoints, above 0 they are cubic curves whose handles grow with the value.

Why are the copy and download buttons disabled?

A color that is not #rrggbb or #rgb draws no blob and shows its own message, for example “Enter the fill color as #rrggbb or #rgb to draw the blob.” The second color counts while the gradient is on, the stroke color while the width is above 0, and the stroke width must be from 0 to 20.

Can I use the blob as a React component?

Copy React gives const BlobSVG = () => ( … ); with the SVG written as JSX, so clip-path, stroke-width and stop-color become clipPath, strokeWidth and stopColor.

SVG Blob Generator

Make an organic SVG blob: set complexity, contrast and smoothness, pick a color, gradient or image fill, then copy SVG, CSS or React, or save a PNG. How it works

Fill Color

Gradient

Image fill

PNG, JPEG, WebP or GIF up to 300 KB, embedded in the SVG and clipped to the blob.

Stroke

Width

0 turns the stroke off.

Shape

Smoothness (60)

SharpSmooth

Complexity (5)

Contrast (5)

Preview on

SVG Code

1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2  <path fill="#007bff" d="M 150.94537209421497,119.4489339639443 C 133.22850906443986,144.45070240199772 126.72904807595197,150.01951649067385 119.4489339639443,150.29801437566158 C 92.71988588799233,161.97665870842232 85.21564068581567,157.39805932192476 79.00385556390167,151.84522484781564 C 51.795926005889335,136.43945439808755 45.255412124983174,129.3162303381419 44.493938219935,120.99614443609835 C 30.218691407018504,91.67991409795644 34.05174251442006,81.38462371829596 40.26352763633406,74.77344498030074 C 55.75867508251545,42.93571122260625 65.49345120984455,38.243108177025086 74.77344498030072,38.044674213660656 C 109.27999377045614,26.344024503355406 120.6596070638307,30.33108456808527 126.32896592727943,36.942263306080484 C 158.3272907180076,53.95324688343635 159.06380981095043,65.4310120923003 157.82540405755012,73.67103407272057 C 161.75447050714106,108.24002198042027 156.6147309576637,113.89609948983518 150.94537209421497,119.4489339639443 Z" />
3</svg>

About the SVG Blob Generator

A blob is a closed outline through 3 + complexity points on a circle of radius 70 units, each moved in or out by a random amount spanning contrast × 6 units and joined with Bézier curves. The defaults (complexity 5, contrast 5, smoothness 60) give 8 points and a 942-character path, and the same settings and seed always draw the same blob.

Shapes and PNG sizes

Shape	viewBox	PNG at 256	PNG at 512	PNG at 1024	PNG at 2048
Square	200 × 200	256 × 256	512 × 512	1024 × 1024	2048 × 2048
Wide 16:9	356 × 200	456 × 256	911 × 512	1823 × 1024	3645 × 2048
Tall 9:16	200 × 356	256 × 456	512 × 911	1024 × 1823	2048 × 3645
Avatar Circle	200 × 200	256 × 256	512 × 512	1024 × 1024	2048 × 2048

The number on a PNG button is the length of the 200-unit side; the other side scales with it and is rounded to a whole pixel. The Avatar Circle also clips the picture to a circle.

Complexity, points and curve segments

Complexity	Points	Curve segments in the path
2	5	5
5	8	8
10	13	13
15	18	18

Counted at smoothness 60 (cubic curves). The path has one curve segment per point.

How to use this tool

Pick a shape (Square, Wide 16:9, Tall 9:16 or Avatar Circle), then set complexity (2 to 15), contrast (1 to 10) and smoothness (0 to 100).
Press Randomize for the next seed. Complexity and contrast are re-rolled too unless you lock them.
Choose a solid fill, a two-color gradient with an angle, or an image fill (PNG, JPEG, WebP or GIF up to 300 KB, embedded in the SVG), an optional stroke (width 0 to 20) and a plain, card or hero preview.
Copy SVG, Copy CSS or Copy React, download the SVG, or save a PNG at 256, 512, 1024 or 2048. Save keeps a blob in the favorites strip, up to 8.

Frequently asked questions

How do I use a blob as a CSS clip-path?: Copy CSS gives width and height in pixels plus clip-path: path(…) for the shape you chose. A path() clip uses pixel coordinates from the top-left corner of the element and does not scale with it, so the clip is exact at 200 × 200 (356 × 200 for Wide, 200 × 356 for Tall). For another size, scale the element with a transform or use the SVG. On the Avatar Circle the CSS carries a comment: the circle clip is not included.
How big is the PNG export?: The button number is the length of the 200-unit side. A Square or Avatar Circle blob at 512 is 512 × 512, a Wide one is 911 × 512 and a Tall one is 512 × 911. The largest, 2048, gives 3645 × 2048 for Wide.
How do I keep a blob I like?: Press Save to add it to the favorites strip. A favorite keeps the settings and the seed, so loading it redraws the same blob, and the strip holds up to 8. Without Save, a reload returns to seed 0 with your last settings, and Randomize moves to seed 1, 2 and so on.
What do complexity, contrast and smoothness change?: Complexity (2 to 15) sets the number of points, 3 more than its value. Contrast (1 to 10) sets how far each point can drift from the circle. Smoothness (0 to 100) bends the joins: at 0 they are quadratic curves through the midpoints, above 0 they are cubic curves whose handles grow with the value.
Why are the copy and download buttons disabled?: A color that is not #rrggbb or #rgb draws no blob and shows its own message, for example “Enter the fill color as #rrggbb or #rgb to draw the blob.” The second color counts while the gradient is on, the stroke color while the width is above 0, and the stroke width must be from 0 to 20.
Can I use the blob as a React component?: Copy React gives const BlobSVG = () => ( … ); with the SVG written as JSX, so clip-path, stroke-width and stop-color become clipPath, strokeWidth and stopColor.

Where blobs are used

A blob puts a soft splash of brand color behind a hero heading, fills the empty corner of a pricing card or frames a team photo. Copy SVG gives an inline graphic that scales with its box, Copy React a JSX component, and a PNG at 256, 512, 1024 or 2048 goes into a design tool. Copy CSS gives a clip-path: path(...), which is drawn in pixels and does not scale: it fits only an element of the blob’s own size, 200 × 200 for Square, so to mask a photo of another size use the SVG instead. Image fill puts a PNG, JPEG, WebP or GIF picture of up to 300 KB inside the outline: the file is read in your browser, copied into the SVG as data, scaled to cover the box and clipped to the blob, and any stroke is drawn on top. Save keeps up to 8 favorites, each with its seed, in this browser until you clear them.

How the outline is built

points = 3 + complexity sit on a circle of radius 0.35 × min(width, height), which is 70 units in every shape. Each is pushed in or out by (random − 0.5) × contrast × 6 units, with random numbers from a seeded generator, so a seed always redraws the same blob.

Joins are cubic Bézier curves. Each handle is the vector between the two neighboring points times smoothness ÷ 100 × 0.15; at smoothness 0 the joins are quadratic curves through the midpoints.

Example: the defaults (complexity 5, contrast 5, smoothness 60, seed 0) give 8 points, noise spanning 30 units and a 942-character path. The 512 PNG of a Wide blob is 911 × 512, because 356 × 512 ÷ 200 = 911.36, rounded to a whole pixel.

The gradient is a two-stop linearGradient rotated by the angle. A color that is not #rrggbb or #rgb draws nothing and turns the copy and download buttons off.

Related Tools

View all tools

CSS

SVG Wave Generator

Make an SVG wave divider for the top or bottom of a section: set points, amplitude, curve bend, size and color, then copy the SVG or download SVG or PNG.

CSS

SVG Pattern Generator

Make a seamless SVG pattern tile of dots, squares, plus signs, stripes, checkers, hexagons or triangles; copy CSS with background-size or save SVG or PNG.

Dev

SVG Code Viewer

Paste SVG code to preview it as an image with scripts, event handlers and outside links removed, list its colors and elements, minify it or export React TSX.

CSS

CSS Clip Path Generator

Write clip-path circle(), ellipse(), inset() or polygon() code from sliders, typed points or points you drag, then copy it as CSS, SCSS, React or Tailwind.

Dev

SVG to CSS Background Converter

Convert SVG markup to a CSS background-image data URI, URL-encoded or Base64. Adds a missing xmlns, rejects non-SVG input, gives url() or inline-style output.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.