Blobs

I enjoyed Juan Diego Rodriguez´ CSS Blob Recipes on CSS Tricks. I learned, each border-radius corner can be addressed with a vertical and horizontal radius! Like:

.blob {
  /* set the horizontal radius to 25% and the vertical to 50%
  border-top-left-radius: 25% 50%; 
}

To address each corner with the two radii, the syntax is:

.blob {
  border-radius:
  /* separate horizontal radii from vertical radii with a forward slash */    
    /* horizontal */
    30% 70% 70% 30% /  
    /* vertical */
    30% 26% 74% 70%;
  /* set width, height, and background */  
  width: 15rem;   
  height: 15rem;  
  background: linear-gradient(47deg, #639 0%, 72%, #0ff 100%);
}

which would create the following shape:

Nils Binder made a tool named Fancy-Border-Radius, to easily create such blobs. Nils not only wrote the tool, but also a great article, titled CSS Border-Radius Can Do That?. From that text I learned it is important for the radii percentage values to add up to 100% for each of the four sides of the shape, to produce an organic looking blob with no straight lines! Due to the nature of the radius property, the shape is limited to be convex, and never concave, but it can have a border and a shadow.

More complex geometric shapes, which include concave appearances, can be produced with the CSS shape() function. shape() is in June 2025 not supported by Firefox, and, according to caniuse.com, is globaly available to only 76.21 % of users, which means you likely cannot use it in production.

As Juan points it out, shape() uses a verbal version of SVG´s path syntax alongside the clip-path property to cut elements into any shape we want. While the geometric shapes can draw any shape an SVG can draw, they are limited to not have a border nor a shadow, but they do support gradient coloration! It is even possible to generate CSS shapes out of SVG´s. Temani Afif has written a SVG to CSS Shape Converter to do this.

Juan mentions the following shape() resources in his article: CSS Almanac shape(), by John Rea, Better CSS Shapes Using shape(), by Temani Afif, and Creating Blob Shapes using clip-path: shape(), also by Temani Afif.