How to create a cloud by combining shapes into one using CSS?

Question

So I'm trying to create a cloud using divs and CSS mainly. I have few divs shaped as circles or blobs and the idea is to merge them into one so that they look like a cloud.

.cloud-body{
 
  width:250px;
  height:200px;
  background: linear-gradient(blue,blueviolet);
  margin-left: 30%;
  margin-top:20%;
  border-radius:50%;
  
}
.blob1{
  width: 100px;
  height: 100px;
  background: blue;
  border-radius:50%;
  position:relative;
  bottom: 200px;
  left: 60%;
 
}
.blob2{
  width: 200px;
  height: 150px;
  background: linear-gradient(blueviolet, blue);
  border-radius:50%;
  position:relative;
  bottom: 200px;
  left: 150px;
}
.blob3{
  width: 200px;
  height: 150px;
  background: linear-gradient(blueviolet, blue);
  border-radius:50%;
  position:relative;
  bottom: 400px;
  left: 400px
}

<div class="wrapper">
<div class="cloud-body"></div>
<div class="blob1"></div>
<div class="blob2"></div>
<div class="blob3"></div>
</div>

However they just look like different blobs stacked on top of each other (as expected with divs). What is the way to combine them or more specifically make the boundaries between each shapes disappear? here's the link to the pen for this on codepen that I'm working on.

Answer 1

You can consider multiple background to create your cloud with one element. You can easily add any number of circle/ellipse with any size and position. One value of radius will give a circle and 2 values will give an ellipse

.cloud {
  width:200px;
  height:150px;
  border-radius: 0 0 50px 50px;
  background:
  /*                radius                            position  / 2xradius*/
  radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30%  /70px    60px,
  radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50%  /100px   90px,
  radial-gradient(50px     ,blue 98%,transparent 100%) 100% 100%/100px   100px,
  radial-gradient(40px     ,blue 98%,transparent 100%) 0 100%   /80px    80px,
  /* base of the cloud */
  linear-gradient(blue,blue) bottom/100% 40px;;
  background-repeat:no-repeat;
}

<div class="cloud"></div>

If you want a gradient as coloration you can do it with mask. You simply use the gradient previously defined inside the mask property:

.cloud {
  width:200px;
  height:150px;
  border-radius: 0 0 50px 50px;
  background:linear-gradient(60deg,red,blue);
  -webkit-mask:
  radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30%  /70px   60px,
  radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50%  /100px  90px,
  radial-gradient(50px     ,blue 98%,transparent 100%) 100% 100%/100px  100px,
  radial-gradient(40px     ,blue 98%,transparent 100%) 0 100%   /80px   80px,
  
  linear-gradient(blue,blue) bottom/100% 40px;
  mask:
  radial-gradient(35px 30px,blue 98%,transparent 100%) 20% 30%  /70px   60px,
  radial-gradient(50px 45px,blue 98%,transparent 100%) 50% 50%  /100px  90px,
  radial-gradient(50px     ,blue 98%,transparent 100%) 100% 100%/100px  100px,
  radial-gradient(40px     ,blue 98%,transparent 100%) 0 100%   /80px   80px,
  
  linear-gradient(blue,blue) bottom/100% 40px;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

<div class="cloud"></div>