CSS Border Radius & Blob Generator
Create asymmetrical 8-point CSS border radius shapes, fluid blobs, organic corners and animated morphs with copy-ready code.
Controls
Live preview
Generated code
/* Your CSS will appear here */CSS Border Radius & Blob Generator: how it works
Choose a preset or edit the four horizontal and four vertical percentages. Click Random blob for an organic starting shape. The generator updates the preview and CSS output immediately, so you can test different choices before committing them to your project.
Popular ways to use this CSS generator
- Create distinctive blob shapes for illustrations and profile images.
- Fine-tune asymmetric corners with the CSS slash syntax.
- Generate a simple CSS animation that morphs between two organic shapes.
For more ideas, try the related tools below. All controls work right in your browser, and the generated code can be included in your own stylesheet.
About border radius CSS.
What does the slash mean in border-radius?
Values before the slash control horizontal radii. Values after it control vertical radii, letting you make elliptical corners.
Can CSS border-radius create blobs?
Yes. Different percentage values on each corner of a rectangular element can create organic, blob-like outlines.
Will these shapes resize responsively?
Percentage-based radii scale with the element, so your shape adapts as its dimensions change.
How do I make a circle with CSS border-radius?
Give the element equal width and height and set border-radius: 50%. Different dimensions create an ellipse instead.
What is the CSS border-radius slash syntax?
The slash separates horizontal radii from vertical radii, letting each corner form an elliptical curve instead of a simple circular corner.
Can each corner have a different border radius?
Yes. CSS lets you specify top-left, top-right, bottom-right, and bottom-left corner values individually; this generator also controls horizontal and vertical values.
How can I make an organic blob shape with CSS?
Combine uneven elliptical corner radii and experiment with the blob presets. Copy the resulting border-radius declaration into your element styles.