<body>
  <div class="box-canvas">
    <div class="top">
      <div class="lava-window">
        <div class="blob-top"></div>
        <div class="blob-middle"></div>
        <div class="blob-bottom"></div>
        <div class="blob-right"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="upper"></div>
      <div class="lower"></div>
    </div>
  </div>
</body>
:root {
  --red-bright: #ED2827;
  --red-dark: #BD2429;
  --yellow: #FCDA05;
  --orange-light: #FCA722;
  --orange-dark: #F26524;
  --silver-dark: #AAA3B0;
  --silver-light: #D6D3DA;
  --purple-dark: #813276;
  --purple-light: #B55EA3;
}

body{
  background: #131416;
   background: radial-gradient(
    var(--purple-light),
    10%,
    #131416
  );
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 90px;
  height:250px;
}

.top {
  position: absolute;
  width: 90px;
  height: 150px;
  clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
  
  border-radius: 40%;
}

.top::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 40px;
  background: linear-gradient(to right,
    var(--silver-dark),
    var(--silver-light),
    var(--silver-dark),
    var(--silver-light),
    var(--silver-dark),
    var(--silver-light),
    var(--silver-dark)
  );
}

.lava-window {
  position: absolute;
  width: 90px;
  height: 110px;
  bottom: 0;
  background: linear-gradient(to right,
    var(--purple-dark),
    15%,
    var(--purple-light),
    85%,
    var(--purple-dark)
  );
}

.lava-window::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 110px;
  background: linear-gradient(to bottom, var(--purple-dark), 20%, transparent);
}

.blob-top {
  position: absolute;
  left: 40px;
  top: -15px;
  width: 30px;
  height: 30px;
  background: var(--red-bright);
  border-radius: 50%;
}

.blob-middle {
  position: absolute;
  background: var(--red-bright);
  background: radial-gradient(circle at top center,
    var(--orange-light),
    var(--orange-dark),
    var(--red-bright), 
    80%, 
    var(--red-dark));
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: 30px;
  left: 20px;
}

.blob-bottom {
  position: absolute;
  width: 50px;
  height: 30px;
  border-radius: 40% 40% 50% 50%;
  transform: skew(-0deg, -10deg);
  bottom: -5px;
  left: 10px;
  background: radial-gradient(at center top,
    var(--yellow),
    var(--orange-light),
    var(--orange-dark),
    var(--red-bright),
    var(--red-dark)
  );
}

.blob-right {
  position: absolute;
  bottom: 25px;
  right: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(
    circle at top,
    var(--yellow),
    20%,
    var(--orange-light),
    50%,
    var(--orange-dark)
  );
}

.bottom {
  position: absolute;
  top: 150px;
  width: 90px;
  height: 100px;
}

.bottom .upper {
  position: absolute;
  width: 90px;
  height: 50px;
  background: linear-gradient(to right,
    var(--silver-light),
    var(--silver-dark),
    var(--silver-light),
    var(--silver-dark),
    var(--silver-light)
  );
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

.bottom .upper::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 90px;
  height: 100px;
  background: radial-gradient(transparent, 70%, #76737A);
}

.bottom .lower {
   position: absolute;
  width: 90px;
  height: 50px;
  top: 50px;
  background: linear-gradient(to right,
    var(--silver-light),
    var(--silver-dark),
    var(--silver-light),
    var(--silver-dark),
    var(--silver-light)
  );
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.bottom .lower::after {
  content: '';
  position: absolute;
  top: 0;
  width: 90px;
  height: 100px;
  background: radial-gradient(transparent, 70%, #76737A);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.