<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
  </filter>
</svg>
<div class="hooks-main">
  <div></div>
  <div></div>
</div>
.hooks-main > svg {
  display: none;
}

.hooks-main > div {
  background: orangered;
  opacity: 0.6;
  position: absolute;
  top: 30px;
  left: 30px;
  width: 300px;
  height: 120px;
}

.hooks-main > div:nth-child(2) {
  width: 100px;
  height: 300px;
}

.hooks-main {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: url("#goo");
  overflow: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.