FreeDev Tools

CSS Blob Generator

Organic blob shapes from the 8-value border-radius trick — tweak four sliders.

.blob {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 60% 40% 70% 30% / 40% 70% 30% 60%;
}

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Drag the corner sliders

    Four sliders control the 8-value radius pair-wise.

  2. 2

    Pick the gradient

    Start and end colors plus overall size.

  3. 3

    Copy the CSS

    One border-radius line makes the shape.

Frequently Asked Questions

With the 8-value border-radius syntax — horizontal radii / vertical radii per corner. Asymmetric percentages turn a square into a smooth organic blob; four sliders drive the eight values.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually