Create organic blob shapes with CSS in seconds. Drag the sliders to morph the shape, then copy the border-radius code — free and private.
Paste the .blob class into your stylesheet, or copy just the border-radius line into your own class.
How to Use
- Drag the eight sliders to morph the blob shape.
- Adjust the size and pick a background colour.
- Press Randomize for instant inspiration.
- Press Copy CSS and paste the code into your stylesheet.
Key Features
- Eight radius sliders — full control over the organic shape.
- Live preview — see the blob morph as you drag.
- Randomize — generate a new blob in one click.
- Copy-ready CSS — paste the class straight into your project.
- 100% private — everything runs in your browser; nothing is sent or stored.
FAQs
What is a CSS blob?
A blob is an organic, rounded shape made with the border-radius property using eight values — four horizontal and four vertical radii.
How do I use the CSS?
Copy the .blob class into your stylesheet and apply it to any element, or copy just the border-radius line into your own class.
Will it work in all browsers?
Yes. Percentage border-radius values are supported by all modern browsers.
Is my data sent anywhere?
No. Everything runs in your browser and never transmits or saves your choices.
Related Tools
CSS Border Radius Generator · CSS Clip Path Generator · SVG Shape Generator · CSS Gradient Generator