Beautiful
Blob Shape
Fully customizable with CSS
Preview Context
CSS Output
.blob {
position: relative;
width: 320px;
height: 320px;
background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
border-radius: 64% 36% 36% 64% / 36% 64% 36% 64%;
transform: rotate(-15deg);
opacity: 0.8;
filter: blur(8px);
}1. Blob Style
2. Shape Settings
Shift where each side’s curve bends.
3. Colors
4. Position
5. Effects (Optional)
Popular Blob Presets
About CSS Blob Generator
Create beautiful CSS blob shapes visually. Customize the shape, size, colors, position, rotation, and effects, then copy the CSS instantly.
How to Create a CSS Blob
- 1Pick a blob style — Smooth, Organic, Round and Custom are pure CSS; Liquid, Tri Blob, Abstract and Irregular have more organic outlines.
- 2Adjust size, complexity, roundness and rotation, and press New shape until you like the outline.
- 3Fill it with a solid colour or a linear, radial or conic gradient with as many colour stops as you like.
- 4Drag the dot in Position (or type X/Y offsets) to nudge the blob, then add optional opacity, blur and shadow.
- 5Check it on a transparent, light, dark, hero or card background, then copy the CSS and HTML or download an SVG.
Frequently Asked Questions
The simplest way is border-radius with eight values, like border-radius: 38% 62% 30% 70% / 44% 62% 38% 56%. Each corner gets a different horizontal and vertical curve, which turns a square into a smooth organic blob — no images needed.
The four values before the slash set each corner's horizontal radius (top-left, top-right, bottom-right, bottom-left) and the four after it set the vertical radii. Keeping opposite values complementary, such as 38% and 62%, keeps every side curved instead of flat.
Yes. The blob is an ordinary element, so its background can be any linear, radial or conic gradient. For the more organic styles, the outline is applied as a CSS mask so the fill still comes from CSS.
Add the .blob element to your section — give the section overflow: hidden, and position the blob absolutely (or use the X/Y offsets) to move it behind your content. Blur plus lower opacity turn it into a soft glow.
CSS is lighter and easy to animate or restyle, so it's the default. Use the SVG output or download when you need the blob as an image, in a design tool, or on a platform that doesn't let you add CSS.
Related Tools
More free CSS generators you might like.