| <!DOCTYPE html> | |
| <div class="container"> | |
| <div class="orangebox"></div> | |
| <div class="bluebox blur blur-bd"></div> | |
| </div> | |
| <style> | |
| div { | |
| width: 100px; | |
| height: 100px; | |
| position :absolute; | |
| } | |
| .container { | |
| width:200px; | |
| height:200px; | |
| position:absolute; | |
| } | |
| .blur { | |
| -webkit-filter: blur(5px); | |
| filter: blur(5px); | |
| } | |
| .blur-bd { | |
| -webkit-backdrop-filter: blur(15px); | |
| backdrop-filter: blur(15px); | |
| } | |
| .orangebox { | |
| left: 10px; | |
| top: 50px; | |
| background: orange; | |
| } | |
| .bluebox { | |
| left: 60px; | |
| top: 110px; | |
| background: blue; | |
| opacity: 0.35; | |
| } | |
| </style> |