Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
<title>backdrop-filter example</title>
<style>
body {
   width=600px;
}
.colorbox {
    width: 200px; height: 200px; 
    background: red; 
    position: absolute;
    opacity: 0.5;
    left: 150px;
    top: 50px;
}
.filterbox {
    font-family:Verdana,sans-serif;font-size:15px;
    display: block;
    position: absolute; 
    left: 100px; 
    width: 150px;
    height: 100px;
    margin: 0px auto;
    border: 1px solid blue;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.box1 {
    top: -40px;
    opacity: 0.5;
    background: blue;
    color: white;
}
.box2 {
    top: 140px;
    opacity: 1.0;
    color: white;
}
.box3 {
    top: 60px;
    left: -80px;
    opacity: 0.5;
    color: black;
}
</style>
<div class="colorbox">
  <div class="filterbox box1">Box 1</div>
  <div class="filterbox box2">Box 2</div>
  <div class="filterbox box3">Box 3</div>
</div>
Output

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

Dismiss x
public
Bin info
mfreed7pro
0viewers