box not getting shown

I am trying to place my bubble(blob) into a box with a red border and 500 pixels in size but unable to do so, please help me understand where my red box has been misplaced in the style sheet

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

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

.box {
  border: 500px red;
}

.blob {
  height: 150px;
  width: 150px;
  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::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

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

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

<!-- end snippet -->

credit:@NanouuSymeon(twitter)

Your border property is missing solid like so:

border: 500px solid red;

However, with a border this thick, your bubble is engulfed. The below snippet shows with a border of 1px

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

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

.box {
  border: 1px solid red;
}

.blob {
  height: 150px;
  width: 150px;
  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::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

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

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

<!-- end snippet -->

Your question is a bit unclear: "box with 500px size": 500px what – width, height? In my snippet below I set it to 500px width and height and defined the red border solid and 1px wide. Adopt that to your needs...

To center the contents inside it, you can add flex-settings as done below. In that case, also add position: relative; to .blob to make it the position reference for your absolutely positioned pseudo-elements.

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

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

.box {
  border: 1px solid red;
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blob {
  height: 150px;
  width: 150px;
  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;
  position: relative;
}

.blob::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}

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

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

<!-- end snippet -->