Blob Shape Generator: Organic Shapes with CSS Border-Radius
Create soft organic blob shapes and custom corner radii with pure CSS, perfect for modern hero sections and avatars.
Open the free Border Radius & Blob Generator →What is the Border Radius & Blob Generator?
Make organic blob shapes and custom corner radii with CSS border-radius. It's completely free, needs no sign-up and works on any phone or computer.
Why it's helpful
- Random and custom shapes
- Pure CSS, no images
- Copy the code
Who it's for
Web designers and front-end developers.
How to use it
- Drag the sliders or click Random blob.
- Copy the CSS into your stylesheet.
💻 Open source: this tool is free and open source (MIT License). View the code on GitHub, download it and run it offline.
The bigger picture: Design
Good design builds trust in seconds. Colour, typography, spacing and accessibility tools help developers and small businesses create websites that look professional without hiring a full design team.
What's changing: Accessibility is moving from nice-to-have to expected, and modern CSS now does with a few lines what used to need images and JavaScript.
Frequently asked questions
What does the slash mean?
Values before the slash set horizontal radii; values after set vertical radii, which creates the organic shape.
