<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.