Question 1

What is a CSS blob?

Accepted Answer

A CSS blob is an organic, asymmetric shape created with the CSS border-radius property. By setting different values for each corner (or using 8 values for a more complex shape), you can create beautiful smooth blobs that look hand-drawn — no images or SVGs required.

Question 2

Where are CSS blobs used?

Accepted Answer

CSS blobs are popular in modern web design for hero sections, decorative backgrounds, avatar shapes, illustration elements, card backgrounds, button accents, and as image masks. They are especially common in Material You / Android-style designs.

Question 3

Can I export the blob as an SVG or PNG?

Accepted Answer

Yes. After generating a blob, you can copy the HTML and CSS to embed it directly in your project. You can also screenshot the preview or use a CSS-to-SVG conversion to export it as a vector image.

Question 4

Do CSS blobs work in all browsers?

Accepted Answer

Yes. The border-radius property with up to 8 values is supported in all modern browsers (Chrome, Firefox, Safari, Edge, Opera). The basic syntax with 4 values has been supported since IE9.