CSS Tools · runs in your browser

Blob Generator

Create organic blob shapes as border-radius CSS or an SVG path.

No sign-up No file limit Nothing uploaded

Blob Generator

How to use 3 steps
  1. Set the Edge points and Irregularity.
  2. Pick the gradient colours, and press New shape until you like one.
  3. Press Copy for the code, or Download SVG.
SVG output only. More points give a busier outline.
Generated code






	The CSS route uses the eight-value border-radius shorthand, which stays fluid at any element size but can only bend the four corners — it cannot produce a genuine wobble. The SVG route places points around a circle at varying radii and joins them with a closed Catmull-Rom curve converted to cubic Béziers, so the outline is smooth and has no seam where it meets. Use CSS when the shape must resize with content, and SVG when the silhouette matters.


			


			
			
					

			
How this tool works


							
Two quite different shapes are produced from the same settings. The CSS form is a border-radius shorthand with eight values — four horizontal and four vertical radii, separated by a slash — which lets each corner be elliptical rather than circular and is enough to make a rectangle read as an organic lump. The SVG form samples points around a circle at varying radii and joins them into a closed curve, which can be far more irregular than eight radii allow.

			
							
The curve is built by converting Catmull-Rom control points into cubic Bézier segments, so the path passes through every sampled point and closes without a visible seam where the ends meet. The irregularity setting drives how far each sample strays from the base radius, and the point count sets how many samples there are — more points at the same irregularity gives a busier, less rounded outline. Each regeneration is random, so the same settings produce a different blob every time.

			
												
Choosing between the two outputs

								
    
																	
  • 
															The CSS form scales with the element:
														its values are percentages, so the shape adapts to any size and reflows with the layout. It cannot produce concave edges, which is the limit of what eight radii can express.						
    • 
																	
  • 
															The SVG form can be genuinely irregular:
														concave curves, sharp inlets and asymmetry are all available, because the outline is a real path rather than four rounded corners.						
    • 
																	
  • 
															There is no way back to a blob you liked:
														the shape is regenerated randomly each time. Copy the output before changing anything, because the settings alone will not reproduce it.						
    • 
																	
  • 
															A clipped element still occupies its rectangle:
														in the SVG preview mode the shape is applied as a clip path, so surrounding content flows around the box rather than around the curve.						
    • 
									

					

		
			
Two outputs, two different techniques



The [msm_tool slug="blob-generator"] produces the same idea two ways, and they are not interchangeable.



The CSS form is a border-radius shorthand with eight values — four horizontal radii, then four vertical ones after a slash. Splitting them lets each corner be elliptical rather than circular, and that alone is enough to make a rectangle read as an organic lump. Because the values are percentages, the shape scales with the element and reflows with the layout.



The SVG form samples points around a circle at varying radii and joins them into a closed curve. It is a real path, so it can do things eight radii cannot.



The CSS form cannot curve inward



This is the limit worth understanding before choosing. border-radius rounds corners inward from the box; it has no way to push an edge in toward the centre. Every CSS blob is therefore convex — a rounded rectangle with uneven corners, however irregular it looks.



If you want a genuine inlet, a pinch, or an asymmetric bulge, that needs a path, which is what the SVG output is for.



How the SVG curve is built



Points are sampled at intervals around a circle, each pushed in or out by a random amount, and then joined with cubic Bézier segments derived from Catmull-Rom control points. That last part is why it matters: a Catmull-Rom spline passes through every sampled point rather than near them, and it closes without a visible seam where the ends meet.



Joining random points with straight lines gives a polygon. Joining them with naive curves gives a shape with a kink where it closes. This is the reason the outputs look organic rather than lumpy.



More points means busier, not smoother



The instinct is that more sample points produce a smoother curve. The opposite is true at a fixed irregularity: more points means more places for the outline to deviate, so the shape reads as busier and less rounded.



For the soft background shapes these are usually used for, five to eight points with moderate irregularity is the useful range. Twenty points produces something closer to a splash than a blob.



Every regeneration is random



There is no seed and no history. The settings alone will not reproduce a shape you liked — copy the CSS or the SVG the moment you see one you want.



That is worth saying plainly because it is the most common frustration with any generator of this kind. Two blobs generated from identical settings are different blobs.



Where each output belongs



    
	
  • CSS — a decorative shape on an element that resizes: an avatar frame, a section background, a hover state on a card. It costs nothing, needs no extra markup, and adapts to any dimensions.
    • 
	
  • SVG — a background illustration, a masked photograph, anything needing concave edges. It is a fixed path, so it will distort if stretched to a very different aspect ratio unless the viewBox is handled properly.
    • 




The layout still uses the rectangle



Whichever form you use, the element occupies its full box. A blob applied as a clip path does not make surrounding text flow around the curve — content flows around the rectangle, exactly as it does for any clipped element.



If text should follow the shape, that is shape-outside, which takes similar values and does a different job.



Restraint



Blobs became ubiquitous around 2019 and are now firmly dated when overused. One as a background accent behind a hero section reads as considered. Four of them in different colours reads as a template.



They also carry no meaning, so they are decoration in the strictest sense: nothing should depend on a user perceiving one, and they need no alternative text because there is nothing to describe.

			
			
					

			

				

					Frequently Asked Questions				

				

					Specific to the Blob Generator. Broader questions about this category are answered on the category page.				

			


					

											

					
					

						
The CSS form when the shape decorates an element that resizes, since it is percentage-based. The SVG form when you need concave edges or genuine irregularity.

					

				

											

					
					

						
Every regeneration is random. Copy the CSS or the SVG as soon as you see one you want; the settings by themselves will not reproduce it.

					

				

											

					
					

						
Four horizontal radii, then four vertical ones after the slash. Splitting them lets each corner be elliptical instead of circular.

					

				

											

					
					

						
Border-radius can only round corners inward from the box. Concave edges need a real path, which is what the SVG output provides.

					

				

											

					
					

						
The opposite, at the same irregularity. More sample points means more places for the outline to deviate, so it reads as busier rather than rounder.

					

				

					

				

		
			


			

		

	









	

		

			

				
									
Subscribe to receive notifications about new tools, features, and productivity tips.