Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<body>
  <div class="dialog">This is on top of everything</div>
  <div>
    <div class="isolate">
      <div class="filter">
        <div class="keep-nesting">
          <img src="https://cdn.glitch.com/13397719-a125-4725-90b0-1385916f5791%2Fsimple_blur.jpg?1538598446896" width="600px">
          <div class="text">This is deeply-nested, inside multiple stacking contexts.</div>
        </div>
      </div>
    </div>
  </div>
<style>
.dialog {
  position: absolute;
  backdrop-filter: blur(4px) hue-rotate(120deg);
  z-index: 9999;
  width: 400px;
  height: 200px;
  top: 100px;
  left: 100px;
  font-size:40pt;
  color: black;
}
.isolate {
  isolation: isolate;
}
.filter {
  filter: brightness(80%);
  opacity: 0.7;
}
.keep-nesting {
  width: 150px;
  height: 150px;
}
.text {
  position: absolute;
  width: 500px;
  top: 250px;
  font-size:30pt;
}
</style>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mfreed7pro
0viewers