not able to see color bands properly

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.blob {
            height: 150px;
            width: 150px;
            border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
            background: transparent;
            box-shadow: inset 6px 33px 20px 0px #00FFFF, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9 ;
        }
        .blob:nth-child(1)
			{
            position: absolute;
            border-radius: 37% 54% 46% 46%;
            background: white;
            width: 50px;
            transform: rotate(-30deg);
            height: 15px;
            top: 20px;
            left: 40px;
        }
         .blob:nth-child(2)
		{
            position: absolute;
            border-radius: 50%;
            background: white;
            width: 10px;
            height: 10px;
            top: 60px;
            left: 20px;
        }
/*
.blob:nth-child(3) {
  position: absolute;
  border-radius: 60%;
  background: aqua;
  width: 30px;
  height: 10px;
  top: 80px;
  left: 20px;
}

.blob:nth-child(4) {
  position: absolute;
  border-radius: 70%;
  background: white;
  width: 40px;
  height: 10px;
  top: 100px;
  left: 20px;
}

.blob:nth-child(5) {
  position: absolute;
  border-radius: 80%;
  background: white;
  width: 40px;
  height: 10px;
  top: 120px;
  left: 20px;
}

<!-- language: lang-html -->

<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<!--div class="blob"></div>
<div class="blob"></div-->

<!-- end snippet -->

color bands Aqua,yellow,white are displayed at the moment

Next I tried to add more colour bands via 3 more child elements(using the commented code in my html and css snippet) but then display gets clobbered up.

So I am unable to understand where I am going wrong in my geometries/concepts

credit:twitter @NanouuSymeon

Your main shape with the background is being applied to .blob elements. However you are then using nth-child to overwrite all those styles with element-specific styles, and there is no main element left to show the original background and shape.

Try wrapping the .blob elements in a different element that will have the shape and background applied just to it. That way you will not have your nth-child override the main shape.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.shape {
  height: 150px;
  width: 150px;
  position: relative;
  border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0px #800080, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
}

.blob:nth-child(1) {
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 40px;
}

.blob:nth-child(2) {
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

.blob:nth-child(3) {
  position: absolute;
  border-radius: 60%;
  background: aqua;
  width: 30px;
  height: 10px;
  top: 80px;
  left: 20px;
}

.blob:nth-child(4) {
  position: absolute;
  border-radius: 70%;
  background: white;
  width: 40px;
  height: 10px;
  top: 100px;
  left: 20px;
}

.blob:nth-child(5) {
  position: absolute;
  border-radius: 80%;
  background: white;
  width: 40px;
  height: 10px;
  top: 120px;
  left: 20px;
}

<!-- language: lang-html -->

<div class="shape">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
</div>

<!-- end snippet -->