HomeToolsBlob Maker

CSS WORKSPACE

Blob Maker

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Blob Maker

Mode
Complexity (Points)
8
Randomness
30
Presets
PREVIEW
css
/* SVG Code */
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <path fill="#FF0066" d="" />
</svg>

/* Or using CSS clip-path (limited support) */
clip-path: path('');
A PRACTICAL GUIDE

Keep organic shapes in a supporting role

An organic blob can frame an illustration or add a small accent to a section. Its purpose is usually decorative, so it should not displace a heading, obscure a control, or introduce a confusing reading order. Choose a shape that still works when the section becomes narrow.

How to use this tool

  1. Generate a shape and adjust its complexity. A small number of smooth curves often feels more deliberate than a highly irregular outline.
  2. Pick a fill color that fits your page. If the shape sits behind content, reduce its contrast and preserve enough clear space.
  3. Use the generated SVG or CSS output in the appropriate element. Keep its aspect ratio and mark purely decorative artwork as hidden from assistive technology.

The values before and after the slash define horizontal and vertical corner radii. This is a CSS-only organic shape; use the tool’s SVG output when you need a more detailed outline or precise path control.

Read the reference documentation ↗
Example to try in your project
.organic-accent {
  width: 180px;
  aspect-ratio: 1;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  background: #dbeafe;
}

Before you ship

Decorative artwork should not receive keyboard focus. When an SVG communicates real information, provide an accessible name instead of hiding it. Check for overlap at mobile widths.

Explore a related tool